Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
gorelegacy

Use same timeline on Multiple Elements - ScrollMagic

Recommended Posts

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Hi gorelegacy,

 

The point: use the class instead of the same id

 

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

 

Happy tweening ...

Mikel

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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


 
  • Like 4
Link to comment
Share on other sites

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

 

 

 

 

Link to comment
Share on other sites

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.

:)

  • Like 4
Link to comment
Share on other sites

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

You guys are great. Greensock community going strong!!

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×