Use same timeline on Multiple Elements - ScrollMagic

[gorelegacy 3 Likes (Newbie)]

So i've tried using my animation component more than once on a page. But its only works on one element. It doesn't animate on duplicate elements

 

I've tried methods from Petr https://www.youtube.com/watch?v=NA9SIQnzRQc & https://www.youtube.com/watch?v=c85GjM7vy5A&t=198s

One of Petr's methods works great for adding a classes to multiple elements, but i cant get it working with a gsap timeline.

 

This is my code, i left out all the gsap code animating my feathers. Now remember this animation is working perfectly on one div. Its just when i try duplicate the timeline on other divs, it only plays on one div not all of them.

 

// create tween
            var timeline = new TimelineMax( {repeatDelay:0, repeat:-1} )
             .add(tween1, 0)
             .add(tween2, 2.1)
             .add(tween3, 4)
             .add(tween4, 6.5)
             timeline.timeScale(1.2) // 1 default


            $('.feather_container_home, .feather_container').each(function(){

            // build scene
            var scenefeather1 = new ScrollMagic.Scene({ triggerElement: this.children[0], triggerHook: '1', offset: 200, reverse: false})
                            .setTween(timeline)
                            // .addIndicators( {name: "feathers"} )
                            .addTo(controller)

            });

 

Would be great if someone has a solution or had trouble with this before. thanks!

See the Pen LLBjvr by gorelegacy (@gorelegacy) on CodePen

[GreenSock 8,117 Likes (Superhero)]

Hm, it's tough to say without seeing your tween instances. I assume the problem is there - I bet those tweens all reference the same thing, and you're just adding them to one timeline and wiring that timeline to a bunch of things. Very difficult to troubleshoot blind, but I'd bet you need to create new tweens inside of your each() method (so that the tweens target each element you're looping through). A reduced test case in codepen would be super helpful. 

[gorelegacy 3 Likes (Newbie)]

24 minutes ago, GreenSock said:

Hm, it's tough to say without seeing your tween instances. I assume the problem is there - I bet those tweens all reference the same thing, and you're just adding them to one timeline and wiring that timeline to a bunch of things. Very difficult to troubleshoot blind, but I'd bet you need to create new tweens inside of your each() method (so that the tweens target each element you're looping through). A reduced test case in codepen would be super helpful. 

 

i just added a pen to my post. thanks jack!

[mikel 1,823 Likes (Superhero)]

Hi gorelegacy,

 

The point: use the class instead of the same id: 

 

See the Pen LLBQxX by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[gorelegacy 3 Likes (Newbie)]

Thanks Mikel!

 

Silly me. That solves it. Just one more thing. Im not sure what to do with the trigger. They all trigger at the same time.

[mikel 1,823 Likes (Superhero)]

Hi gorelegacy,

 

Please have a look to the docs:  staggerTo in combination with cycle could be a nice way: https://greensock.com/docs/TimelineMax/staggerTo()

 

Create one TimelineMax with an array of all feathers. Cycle will help you to handle all arrays of values ...

 

Then you can adopt and vary this TimelineMax  for all containers:

with relative arrays like ["#container01 .feather01","#container01 .feather02", ...] 

 

The start time for each container is then up to you - defined in the respective timeline.

 

Does that help ???

 

Kind regards

Mikel

[gorelegacy 3 Likes (Newbie)]

thanks for your help Mikel!!
But i think its more to do with my loop when to trigger it with scrollmagic, not gsap.

 

 

 

 

[PointC 8,599 Likes (Superhero)]

Hi @gorelegacy

 

They're all triggering at the same time because you've got the same timeline in each ScrollMagic trigger. You're creating a trigger for each .feather_container class which is correct, but you're using .setTween(timeline) for all of them. You want a separate timeline for each trigger. Those can be created manually or in a loop if they're all the same. Here are a couple of pens from other forum questions, but they show how to set up multiple triggers in ScrollMagic.

 

See the Pen MmzGZQ by PointC (@PointC) on CodePen

 

See the Pen evqNEP by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

[gorelegacy 3 Likes (Newbie)]

Thanks so much Craig. They really helped, i've got it working in a loop now.

You guys are great. Greensock community going strong!!