Haider Amin

Actually I was able to solve it! Replace those 2 functions in my last codepen with these and it works. Apparently the way it uses rotation property is bit different but I think I got hang of it. const pieClockWiseAnim = () => { const tl = gsap.timeline(); tl.from(".clockwise_anim", { opacity: 0, rotation: -pieRotateMax, scale: 0, }); tl.to(".clockwise_anim", { opacity: 0, rotation: pieRotateMax, scale: 5, duration: 1, }); return tl; }; const pieAntiClockWiseAnim = () => { const tl = gsap.timeline(); tl.from(".anticlockwise_anim", { opacity: 0, rotation: pieRotateMax, scale: 0, }); tl.to(".anticlockwise_anim", { opacity: 0, rotation: -pieRotateMax, scale: 5, duration: 1, }); return tl; };

Everyone, thank you for your prompt responses. I am super close to solving this. @nico fonseca Thank you for your response! I was able to achieve 95% of what I want using your mentioned separate timeline method. However, these is just 1 small thing that I don't understand. I also cleaned up code and made it much more compact. In the following codepen, I want to run 3 animation simultaneously: max: 360; Starting States: text: scale(5) opacity(0) blur(25px) clockwise_anim: scale(0) opacity(0) rotate(0) anticlockwise_anim: scale(0) opacity(0) rotate(max) Steps: 1: text: scale(1) opacity(1) blur(0px) clockwise_anim: scale(1) opacity(1) rotate(max) anticlockwise_anim: scale(1) opacity(1) rotate(0) 2: text: scale(0) opacity(0) blur(25px) clockwise_anim: scale(5) opacity(0) rotate(max*2) anticlockwise_anim: scale(5) opacity(0) rotate(-max) Problem: text: When the text becomes scale 1, there is a delay (I keep scrolling and after a while), it starts animating to step 2. clockwise_anim + anticlockwise_anim: from starting state to step 1, opacity and scale change as expected. However, the rotate property starts working after scale and opacity are 1. It first rotates clockwise_anim elements, then anticlockwise_anim elements, and then moves on to step 2. The step 2 of rotate animation works as intended. Both change scale, opacity and rotation property at once. Can you please help me in this? As I am new to this maybe I have made the timeline code wrong? Thanks https://codepen.io/HayderAmeen/pen/bGRjbOM

Hey! Thank you for response. Here is codepen: https://codepen.io/HayderAmeen/pen/bGRKzzK The bug: After the text and concentric circles disappear on scroll, the concentric circles appear again. I am not sure why this animation is replaying when in code, it has ended. I apologize for non-clean code as I am learning scrollTrigger at this point.

I am using ScrollTrigger + Timeline to create an animation story based on scroll. Just like Apple's site. I used scrollMagic before and it worked fine. However, I am having trouble migrating to ScrollTrigger plugin. Here is the issue: Step 1: A text appears and then fades out Step 1 (simultaneously): A chart has 5 parts which rotate in opposite directions - scale: 0 -> scale:1 -> scale:5 + opacity:0 I am using absolute time parameters to run these side by side and they work fine. However, as soon as the chart animation ends, it starts again (as I keep scrolling) with weird values. I do not understand why it is happening. Any help would be massively appreciated!