1

I'm working with the ScrollMagic Library for a project.

How can I set multiple setClassToggle in the same trigger scene?

My Code:

 // move tree 1 to the left
var Waldscene01 = new ScrollMagic.Scene ({
    triggerElement: '.scene01-wald',
    triggerHook: 0,
    offset: 600,
    duration: 1000
})
.setClassToggle('.scene01-baum1', 'translateX')  
.addTo(controller); 



// move tree 2 to the right
var Waldscene02 = new ScrollMagic.Scene ({
    triggerElement: '.scene01-wald',
    triggerHook: 0,
    offset: 400,
    duration: 1000
})
.setClassToggle('.scene01-baum2', 'translateX')
.addTo(controller);

How can I merge this code?

I tried to do it like this, but it didn't work. Only one .setClassToggle worked then:

 var Waldscene01 = new ScrollMagic.Scene ({
    triggerElement: '.scene01-wald',
    triggerHook: 0,
    offset: 400,
    duration: 1000
})
.setClassToggle('.scene01-baum1', 'translateX')
.setClassToggle('.scene01-baum2', 'translateX')

.addTo(controller);

CSS

.scene01-baum1 {
    position: absolute;
    z-index: 3;
    top: 5%;
    left: 20%;
    width: 600px;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all 6s ease-out;
}

.scene01-baum1.translateX {
    transform: translateX(-500px) scale(1.2);
    filter: blur(4px);
}

.scene01-baum2 {
    position: absolute;
    z-index: 3;
    top: 10%;
    left: 50%;
    width: 600px;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all 5s ease-out;
}

.scene01-baum2.translateX {
    transform: translateX(400px) scale(1.2);
    filter: blur(4px);

}

Can someone help me?

Jasmin
  • 69
  • 1
  • 9

1 Answers1

1

You can use a comma to pass multiple selectors like this:

 var Waldscene01 = new ScrollMagic.Scene ({
    triggerElement: '.scene01-wald',
    triggerHook: 0,
    offset: 400,
    duration: 1000
})
.setClassToggle('.scene01-baum1, .scene01-baum2', 'translateX')
.addTo(controller);
Pablo Igarzábal
  • 140
  • 1
  • 6
  • Okay, but the classes would be different for each .scene01-baum --> for ".scene01-baum1" there is the class with the translate to the left and for ".scene01-baum2" its the class with the translate to the right. (I edited my question to show you my CSS) – Jasmin Apr 12 '20 at 15:34
  • 1
    And the trigger element is `.scene01-wald` for both? If that's the case my solution would work. The ScrollMagic documentation states the first parameter is ["A Selector targeting one or more elements or a DOM object that is supposed to be modified."](https://scrollmagic.io/docs/ScrollMagic.Scene.html#setClassToggle). In this case you're saying you want to add `translateX` to both `.scene01-baum1` and `.scene01-baum2` – Pablo Igarzábal Apr 12 '20 at 18:41