Jump to content
Search Community

How you can improve the appearance of the animation?

.mdl test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello to all animation lovers!
For some time now I have been studying gsap animations, there is even some progress. But I still need a consultation with experienced masters :)

 

This works, but there are several but:

 

1. When scrolling, the triangles must fall on certain coordinates, but when the window is resized, the coordinates are shifted, is it possible to “bind tightly” the flying triangles to the text when resizing.

 

Demonstration of normal snapping of triangles to text:

https://prnt.sc/1ty9h7w

 

Demonstration of broken binding when resizing a window:

https://prnt.sc/1ty9f6w

 

2.  When scrolling in the slider section, in a certain situation you can see that the animation “start” of the next section is in the middle of the slider, so the animation in the next section starts earlier, so it does not work correctly, but if you resize the window, then everything comes back to normal. Please tell me why this can happen and what can be done about it?

 

Demonstration of the beginning of the animation in the wrong place:

https://prnt.sc/1ty7vuj

 

3. I get three animation timelines, which are not always located one after another, is it possible to somehow improve the synchronization, for example, by placing them in one timeline? If yes, please tell me.

 

And here you can see the result:

https://mdl95-showcase.ml/z-town/index.html

 

 

See the Pen yLXwMRQ by mdl95r (@mdl95r) on CodePen

Link to comment
Share on other sites

5 minutes ago, Cassie said:

Hi there,

We're glad you're enjoying the tools!

 

It's a little tricky to work out what you need help with from the links provided. If you'd like assistance from the volunteers in these forums, please provide a working minimal demo.

@Cassie Hey! I thought that demos in the form of a site in the starter topic would be enough. The described problem is visible on the site.

Link to comment
Share on other sites

Without a working demo, I'll just offer a few basic comments:

  1. If you need your ScrollTrigger-related animation values to refresh when the window gets resized, set invalidateOnRefresh: true on the ScrollTrigger and use function-based values in your animation. 
  2. If things look weird but then they get fixed when you resize, that tells me you've got something that's altering the DOM/layout AFTER the page loads. If you're doing that, just make sure you call ScrollTrigger.refresh() AFTER you're done editing/shifting around the DOM/layout so that ScrollTrigger can recalculate all the start/end values accordingly. A common cause of this is when someone dynamically loads images into elements that don't have any width/height defined, thus the DOM lays out one way, and then when the images load it suddenly forces everything to shift according to the width/height of the images. One solution is to set their width/height initially via CSS. Or just call ScrollTrigger.refresh() after things load fully. 

If you're going to post a demo, please make sure it's the absolute minimal possible code - do NOT post your whole project in a CodePen. One of the most important skills any developer can learn is to ISOLATE issue effectively. If you get in that habit, you'll probably answer your own questions much more quickly and not even need help from anyone else. 👍

  • Like 1
Link to comment
Share on other sites

11 minutes ago, GreenSock said:

Without a working demo, I'll just offer a few basic comments:

  1. If you need your ScrollTrigger-related animation values to refresh when the window gets resized, set invalidateOnRefresh: true on the ScrollTrigger and use function-based values in your animation. 
  2. If things look weird but then they get fixed when you resize, that tells me you've got something that's altering the DOM/layout AFTER the page loads. If you're doing that, just make sure you call ScrollTrigger.refresh() AFTER you're done editing/shifting around the DOM/layout so that ScrollTrigger can recalculate all the start/end values accordingly. A common cause of this is when someone dynamically loads images into elements that don't have any width/height defined, thus the DOM lays out one way, and then when the images load it suddenly forces everything to shift according to the width/height of the images. One solution is to set their width/height initially via CSS. Or just call ScrollTrigger.refresh() after things load fully. 

If you're going to post a demo, please make sure it's the absolute minimal possible code - do NOT post your whole project in a CodePen. One of the most important skills any developer can learn is to ISOLATE issue effectively. If you get in that habit, you'll probably answer your own questions much more quickly and not even need help from anyone else. 👍

@GreenSock Thanks for the answer! Based on the advice on isolating the problem, I will show the problem areas separately.

  • Like 1
Link to comment
Share on other sites

@GreenSock 

Hey! For the first question, I made a minimal demo available at

And also I made changes based on your answer, namely added invalidateOnRefresh: true and used values based on functions.
Please tell me if it is possible to somehow improve it, I just ran into several problems:
- when changing the height of the window, the triangles are removed from the text https://prnt.sc/1u86w4j my expectation is that they should be near the text
- also when the window is resized, the animation is reset and does not work

Link to comment
Share on other sites

getBoundingClientRect is going to get the current coordinates, so that's going to mess up your calculations if the animation is in progress. And rotation is going to mess up those calculations even further.

 

The simplest solution would be to put your triangles inside a wrapper element, and then measure for that wrapper. Otherwise you'll have to remove the element's transforms before call getBoundingClientRect like this.

 

let transform = el.style.transform;
el.style.transform = "";
let bounds = el.getBoundingClientRect();
el.style.transform = transform;

 

  • Like 3
Link to comment
Share on other sites

  • Solution

Actually, the in-progress stuff shouldn't be an issue if you've got invalidateOnRefresh - I saw a few other problems: 

  1. Your calculations were incorrect - you were using the wrong property (width) of the wrong element in all your "y" calculations, like: 
    // BAD
    y: () => (adwantagesCol1.getBoundingClientRect().y - 
              adwantagesCol1.getBoundingClientRect().width - 
              figure3.getBoundingClientRect().height)
    
    // GOOD
    y: () => (adwantagesCol1.getBoundingClientRect().y - 
              figure3.getBoundingClientRect().y - // <- fixed
              figure3.getBoundingClientRect().height)

     

  2. You have a "scroll" event handler that's messing with the CSS properties of header and main which is throwing off ScrollTrigger's calculations when the screen resizes because you're literally shifting things around manually that ScrollTrigger doesn't know about. 

When those things are fixed, the GSAP/ScrollTrigger stuff seems to work great: 

See the Pen PojLgKb?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

@GreenSock
 

  1. Quote

    You have a "scroll" event handler that's messing with the CSS properties of header and main which is throwing off ScrollTrigger's calculations when the screen resizes because you're literally shifting things around manually that ScrollTrigger doesn't know about. 

    Do I understand correctly that the animation of the "exit" of the header also needs to be done through the gsap?

Link to comment
Share on other sites

11 minutes ago, .mdl said:

Do I understand correctly that the animation of the "exit" of the header also needs to be done through the gsap?

 

Yep.

 

7 minutes ago, .mdl said:

And also I figured out the problem on the second question at the beginning of the topic, the problem is due to a conflict with the vanilla lazyload plugin, I think to put this question in a separate topic.

 

If it's changing the layout, then you should call ScrollTrigger.refresh() after it loads something.

 

 

  • Like 1
Link to comment
Share on other sites

2 minutes ago, OSUblake said:

 

Yep.

 

 

If it's changing the layout, then you should call ScrollTrigger.refresh() after it loads something.

 

 

Do I understand correctly that the call should be when initializing the vanilla lazyload?

Link to comment
Share on other sites

25 minutes ago, .mdl said:

Do I understand correctly that the call should be when initializing the vanilla lazyload?

 

You would only need to call if whatever you're loading changes the layout. And I'm not familiar with vanilla lazyload, does it provide callbacks for when something has been loaded? If so, you would call it when whatever you're loading has been loaded and is in the DOM.

 

  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

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...