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 18,243 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 4,774 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 4,774 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 14,177 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!!

[Filip3000 3 Likes (Newbie)]

I have a trouble replicating this with absolute positioning (see the CodePen, scroll to trigger the fade). Could you please help me transform the code to work with a loop?

 

See the Pen JjXMJdG by filip3000 (@filip3000) on CodePen

[Visual-Q 978 Likes (Leader)]

Hello Filip3000,

 

If you have an issue please create a new post detailing your specific problem, tacking questions on to posts that are several years old is very confusing.

 

Note also that scrollMagic is not a gsap product so we don't officially support it here, though people are free to assist if they like, so you may want to have a look at gsap's scrollTrigger.

 

Re how to use a loop: Zach has an excellent example from:

 

https://css-tricks.com/tips-for-writing-animation-code-efficiently/

 

See the Pen VwLBajb by GreenSock (@GreenSock) on CodePen

 

 

[Filip3000 3 Likes (Newbie)]

Hello @Visual-Q

 

I understand, sorry for the confusion. I decided to post my question here because I was convinced that it is basically the same problem (also the OP is using scrollMagic).

 

Thank you for your answer, I'll take a look at the article.

 

Cheers!