Jump to content
Search Community

Use same timeline on Multiple Elements - ScrollMagic

gorelegacy test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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,

 

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

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

  • 3 years later...

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

 

 

  • Like 1
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.
×
×
  • Create New...