[BUG: Scrolltrigger + Timeline + Scrub animation replays after ending automatically]

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;

};

[BUG: Scrolltrigger + Timeline + Scrub animation replays after ending automatically]

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

 

See the Pen bGRjbOM by HayderAmeen (@HayderAmeen) on CodePen

[BUG: Scrolltrigger + Timeline + Scrub animation replays after ending automatically]

Hey! Thank you for response. Here is codepen: 

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.

[BUG: Scrolltrigger + Timeline + Scrub animation replays after ending automatically]

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!

 

See the Pen bGRKzzK by HayderAmeen (@HayderAmeen) on CodePen