Jump to content
Search Community

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

Haider Amin test
Moderator Tag

Go to solution Solved by Haider Amin,

Recommended Posts

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

Link to comment
Share on other sites

Welcome to the forums, @Haider Amin. We'd love to help, but unfortunately it's almost impossible simply by glancing at a wall of JS code that's just an excerpt. Please provide a minimal demo (like in CodePen) and we'd be happy to take a peek. I didn't notice any ScrollTrigger code in there at all. 

 

ScrollTrigger can do everything ScrollMagic does plus a LOT more, so it shouldn't be too hard to migrate over. Once we see the minimal demo, I'm sure we'll have more to say. Please keep that demo as minimal as possible (you don't need to include your whole project). 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Hey @Haider Amin , your issue is because you are using "0" in position parameters so the animations are overlapping.

See the Pen 4e5af64590a44ae227de9b2943b6cde0?editors=0010 by nicofonseca (@nicofonseca) on CodePen



If you have a lot of animations, it is better to use labels or different timelines to keep your animations encapsulated and separated.

Using labels:

See the Pen d6779e2b71e30a654806fd1378f5fad6?editors=1010 by nicofonseca (@nicofonseca) on CodePen



Using different timelines:

See the Pen 6c5b9606c52391c02e25d27ece652f84?editors=1010 by nicofonseca (@nicofonseca) on CodePen



Other comments:

- Don't use querySelectorAll every time as it already returns all the children.

const pie_1 = pie_chart.querySelectorAll(".pie_chart")[0];
const pie_2 = pie_chart.querySelectorAll(".pie_chart")[1];
const pie_3 = pie_chart.querySelectorAll(".pie_chart")[2];
const pie_4 = pie_chart.querySelectorAll(".pie_chart")[3];
const pie_5 = pie_chart.querySelectorAll(".pie_chart")[4];

 Instead, you can do something like this:

const pies = pie_chart.querySelectorAll(".pie_chart");
const pie_1 = pies[0];
const pie_2 = pies[1];

// Or use toArray gsap method
const pies = gsap.utils.toArray(".pie_chart");
const pie_1 = pies[0];
const pie_2 = pies[1];


- Don't animate a property when the final value is equal to your previous animation, for example:

tl.from(pie_1, {
  opacity: 0,
  scale: 0,
});
tl.to(
  pie_1,
  {
    opacity: 1, //this is unnecessary because the previous animation animate opacity to 1
    duration: 0.5,
  }
)


 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution

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;
};
  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...