Kutomba Posted August 19, 2020 Share Posted August 19, 2020 Hi, I am learning gsap, I found this example on codepen Now I would like to use gsap.timeline or gsap TimelineMax, I change it like this var text = $(".split"); var split = new SplitText(text); var tl = new TimelineMax(); // added timelinemax here function random(min, max){ return (Math.random() * (max - min)) + min; } $(split.chars).each(function(i){ tl.from($(this), 2.5, { // and used it here opacity: 0, x: random(-500, 500), y: random(-500, 500), z: random(-500, 500), scale: .1, delay: i * .02, yoyo: true, repeat: -1, repeatDelay: 10 }); }); Unfortunatelly this is not animating as expected, what do I need to change here to get the same result but using timeline? Thanks Kutomba See the Pen xGyZXp by natewiley (@natewiley) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 19, 2020 Share Posted August 19, 2020 Hey Kutomba. It doesn't make much sense to add a timeline to that animation because the tweens are animating infinitely anyway. That's why it doesn't work as expected (because the second tween is placed after a tween of infinite length). Why are you trying to do this? What's your goal? Link to comment Share on other sites More sharing options...
PointC Posted August 19, 2020 Share Posted August 19, 2020 You'd need to add the position parameter of 0 so all the tweens start at the same time. The way you have it now would just be a sequence. I'd also recommend using the newer GSAP 3 syntax. GSAP 3 also has a built in random utility method https://greensock.com/docs/v3/GSAP/UtilityMethods/random() Happy tweening. 2 Link to comment Share on other sites More sharing options...
Kutomba Posted August 19, 2020 Author Share Posted August 19, 2020 Hi Zach, I am trying to synchronise with my video timeline, I learned it's possible to synchronise gsap animation with video timeline, So Is it possible with this kind of animation to animte using timeline if yes what is missing? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 19, 2020 Share Posted August 19, 2020 First, update to GSAP 3 (including using the new syntax) like Craig suggested. Then remove the following because you don't want repeats if you're syncing things most likely: yoyo: true, repeat: -1, repeatDelay: 10 Then add paused: true so that the tween doesn't run. Then inside of your video's update callback, update the .progress() of your tween. There are several existing threads that sync animations with video. Here are a couple I found after a quick search: 2 1 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