Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
TheVesta

Scrolltriger and Restarting animation effects

Go to solution Solved by GreenSock,

Recommended Posts

Hello! Please help me. I have a sample code on Codepen 

 

I have the following problem: 

1) I clean the Google Chrome browser cache on Android.
2) I open the page and move to the end of the page.
3) All the effects that I applied through GSAP are updated in the visible area. The effect of blinking is created.

 

Please help solve it.

 

P.S. If I just refreshed this page without cleaning the cache, then there will be no problems.

See the Pen vYgKmwM by victor_trunov_ (@victor_trunov_) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the forums, @TheVesta. I'm not sure I understand what you're saying - do you have a video? 

 

My guess is that you have your code running BEFORE the images download, and since you don't have the sizes set in the HTML or CSS (width/height), the page renders with a zero height/width for those initially and then as they load they populate and alter the layout/position of everything else. 

 

I'd recommend setting explicit width/height for your elements to avoid that layout change onload.

 

The main problem may actually be that you're fading in elements BEFORE the images actually load, thus by the time the images load, the elements are already at an opacity of 1, meaning they suddenly appear instead of fading in. Again, the solution would be to wait for those images to load BEFORE you do the fading in. None of this has anything to do with GSAP, just so you know. 

 

I hope that helps!

  • Like 1
Link to comment
Share on other sites

Oh, and a side note: I strongly recommend avoiding string-based transforms, but instead you should tap into the components for transforms:

// not as good
transform: "scale(1.2)"

// better
scale: 1.2

 

  • Thanks 1
Link to comment
Share on other sites

24 minutes ago, GreenSock said:

Welcome to the forums, @TheVesta. I'm not sure I understand what you're saying - do you have a video? 

 

My guess is that you have your code running BEFORE the images download, and since you don't have the sizes set in the HTML or CSS (width/height), the page renders with a zero height/width for those initially and then as they load they populate and alter the layout/position of everything else. 

 

I'd recommend setting explicit width/height for your elements to avoid that layout change onload.

 

The main problem may actually be that you're fading in elements BEFORE the images actually load, thus by the time the images load, the elements are already at an opacity of 1, meaning they suddenly appear instead of fading in. Again, the solution would be to wait for those images to load BEFORE you do the fading in. None of this has anything to do with GSAP, just so you know. 

 

I hope that helps!

Thank you! You helped me very much! I recently use GSAP, I have difficulty, but it is very interesting for me.

Link to comment
Share on other sites

28 minutes ago, GreenSock said:

Oh, and a side note: I strongly recommend avoiding string-based transforms, but instead you should tap into the components for transforms:


// not as good
transform: "scale(1.2)"

// better
scale: 1.2

 

Oh, thank you! 

 

let transform3d = gsap.utils.toArray('.transform3d')
    transform3d.forEach((itemTransform3d, index) => {
      let elemstrokeLight = gsap.to(itemTransform3d, {
        scrollTrigger: {
          trigger: itemTransform3d,
          start: "top 100%",
          scrub: true,
        },
        transform: 'translate3d(0, 550px, 0) scale(1)'
      });
    });

But how can I be if I have such a code?

Link to comment
Share on other sites

25 minutes ago, TheVesta said:

But how can I be if I have such a code?

x: 0,
y: 550,
scale: 1

Is that what you mean? 

  • Thanks 1
Link to comment
Share on other sites

5 hours ago, GreenSock said:





x: 0,
y: 550,
scale: 1

Is that what you mean? 

Yes, it's great! Thank you!

 

 

 

Link to comment
Share on other sites

But why is it better not to write?

transform: 'translate3d (0, 550px, 0) scale (1)

 

Link to comment
Share on other sites

6 hours ago, TheVesta said:

But why is it better not to write?


transform: 'translate3d (0, 550px, 0) scale (1)

 

  1. Performance - when you use a string like that, it could contain ANY number of transforms all mashed into one long string, so GSAP must apply that to the element and then ask the browser to report the combined transforms as a matrix() or matrix3d() which it then must parse and pull out each component (x, y, scaleX, scaleY, rotation, skewX, skewY, etc.). When you use the components individually, GSAP can skip a lot of that work. 
  2. Accuracy - matrix decomposition is inherently ambiguous, especially when it comes to rotational values. The same matrix can represent an infinite number of combinations of components, like rotation: 180 is the same as scaleX: -1, scaleY: -1 or rotation: 540 or many others. When you use GSAP's individual components, there are ZERO ambiguities. The values are cached, accurate, and very fast. 
  • Like 2
Link to comment
Share on other sites

Thank you for explained to me. These are very valuable knowledge. I am glad that I use GSAP and there is good support 🙂

  • Like 1
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.
×