Leaderboard

Hi and welcome to the GreenSock forums, It would really help if you could provide a reduced test case as explained here: GSAP takes timing accuracy very seriously and its hard to imagine a timing issue in the code you posted. if we can see it running it would help so much. FWIW the demo below shows multiple ways of approaching spritesheet animations and all 3 run perfectly synchronized and I've never seen them skip or delay.

Hi Craig, Thanks, glad to me here! This is perfect! ? I'm making some small tweaks to the timing and bezier points now that I have working functionality, but it's going to be great. Great community with lots of knowledge here, and I appreciate it. Wes

Absolutely! You can just TweenMax.to() whatever rotation you need (I assume you wanted that change animated). If you need some help, please provide a reduced test case in codepen.

you can set scaleX and scaleY independently

Nope, not at all One of my major takeaways here is that ScrollMagic (many times) is not necessary, and that is certainly the case with the CodePen in this thread.

Thanks a million Craig ! That's awesome ! I add no idea we could do something like that. Best !

Hi @PointC, Thank you for this detailed explanation. It's crystal clear. You have saved me 53 lines of codes Much appreciated. ~ Nathan.

Hi @Nathan Harold Welcome to the forum. When you have ScrollMagic hijack the tween/timeline duration you have to think in ratios or percentages. Here's a really basic example: You'll see three boxes on a timeline. All three start at the same time and move 500px on the x axis. They each have a different duration. (Red:1, Green:5, Blue:10) The duration of the timeline is 10 seconds. I've set the ScrollMagic duration to 50% of the window height. Since the blue box tween has a duration of 10 seconds, it takes the full scroll distance to complete its animation. Whereas the green duration is 5 so it takes 50% of the scroll distance and the red with a duration of 1 only takes 10% of the scroll distance to finish. It doesn't really matter what duration you set in ScrollMagic. You'll still see the same ratio in the above scenario. Blue:100% of the scroll distance, Green: 50% of the distance and Red:10% of the distance. When you have a whole timeline that has sequential tweens, the same thing happens. Say you have this timeline: tl.to (".red", 3, {x:500}); tl.to (".green", 1, {x:500}); tl.to (".blue", 1, {x:500}); The total duration of that timeline is 5 seconds. So the red box will take 60% (3/5) of the scroll distance and the green and blue boxes will each take 20% (1/5) of the scroll distance to complete. Again it does not matter if the ScrollMagic duration is 100px or 10,000px, the percentage of the scroll distance for each of the tweens to complete remains the same. Make sense? Happy tweening.

Our company is in the digital signage business. We sell engaging motion graphics content to companies with large numbers of digital signs (airports, waiting rooms, banks, etc). We have a LOT of projects in the queue for the next few years and are looking for an experienced GreenSock animator (and web developer) to join our team in Minneapolis. Salary range is $60k - $90k + perks and benefits (but is negotiable depending on experience). Please read about the position here: https://www.screenfeed.com/careers/front-end-developer We are only looking for people who Have demonstrable GreenSock experience. Live in (or are planning to move to) Minneapolis, MN USA. Please don't apply if you're looking to work remotely. Have some web application development experience.

Hi @zzwes Welcome to the forum. There would be a few ways to make this happen. Based on what you have so far, I'd probably create a timeline for each pizza and change the starting progress(). (Pretty much what you were doing). I then added each timeline to an array, loop through it and increment the progress of each timeline by +0.2. every few seconds. I've just used a delayed call to keep the animation going, but you could certainly add some interactivity with a button or draggable too. Here's a fork of your pen. You mentioned poor performance on mobile. Please keep in mind that GSAP is only animating values. All the rendering is done by the browser so you may still see less than desirable results on mobile with these images. Hopefully that helps. Happy tweening and welcome aboard.

Update: We found someone!

FYI. And for anyone else who may experience this: Looks like it's an issue with Uglify; I think I have it pin-pointed to this issue: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/355 NOTE: I edited the topic of this post for more clarity with the cause of the issue.

Thanks Guys! ?

Oh, that is some tight artwork. Not quite what I was picturing, but you can still use a loop to create a bunch of circles in a mask. I just eyeballed this so you'll probably need to make some adjustments, but here's a fork of your pen that should get you started. Does that help? Happy tweening.

Sorry, DrawSVG only works with strokes. You'll need to use a mask to reveal that path. If they're all circular like that, you could use a loop to create a mask for each path. Happy tweening.

Glad you figured it out. And you don't need to pause(0).play() - you can simply play(0)

Hi and welcome to the forum Reversing a loose collection of tweens will be a bit tricky. That's where you'd want to use a timeline. Here's a fork of your pen that reverses by setting the repeat count to 1 and yoyo to true. Of course you can set the repeat count to anything you like. Setting it to -1 will repeat infinitely. You can also add a button to control the reverse too. More info about timelines: https://greensock.com/docs/TimelineMax More info about the position parameter. https://greensock.com/position-parameter Hopefully that helps. Happy tweening.

Thank you so much for your reply!! This has given me plenty to work with and think about, i really had hit a dead end with this one as frustratingly it was working perfectly on the dev machine and i was unaware of a problem. It was only when deploying to other machines it i found an issue. i had never really experienced this with electron as its usually pretty consistent between devices as it has the browser packaged, but at least it enlightened me to the errors in my code. I am sure you have cracked it and that my problem lies within the from animation callback as your demo pen is doing very similar things to what i am experiencing. The setTimeout() was really just to simulate the loading time of the app as there is a splash screen and isn't used for any animation timings. Hopefully that isn't causing problems in this instance. However, i am using it in another animation for a side menu popup that auto closes so this information is extremely useful and i will rewrite that also! I'll use GASP for fade transitions and remove Jquery. i will work on this again this evening and will follow up with my results Thanks again! I have just joined the club!!

Hm, I didn't quite understand the question - are you wanting to change the duration (to add 1 second)? (Disclaimer: I don't really have experience with ScrollMagic so I may not be the best person to answer if it's a ScrollMagic-specific one).