Share Posted July 6, 2017 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 More sharing options...
Share Posted July 6, 2017 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted July 6, 2017 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 More sharing options...
Share Posted July 6, 2017 Hi gorelegacy, The point: use the class instead of the same id: See the Pen LLBQxX by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
Author Share Posted July 6, 2017 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 More sharing options...
Share Posted July 6, 2017 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 4 Link to comment Share on other sites More sharing options...
Author Share Posted July 7, 2017 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 More sharing options...
Share Posted July 7, 2017 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. 4 Link to comment Share on other sites More sharing options...
Author Share Posted July 7, 2017 Thanks so much Craig. They really helped, i've got it working in a loop now. You guys are great. Greensock community going strong!! 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now