[How you can improve the appearance of the animation?]

The lazyload plugin has a callback function callback_loaded, but the result did not suit me and I did not use lazyload in this situation.

[How you can improve the appearance of animation when scrolling?]

Hello to all animation lovers!

 

Please tell me how I can improve the animation in the mobile version (<576px).

My expectation was that when the scrolling reaches a certain column of text, the function of showing the animation is triggered, but in fact the animation either fires earlier than I need and the animation is performed for all columns, and not those in the visibility zone.

 

I would also like to play the appearance of the speakers depending on the direction. I found out that the direction is responsible for this when the onUpdate method is called, but I could not think of how this can be implemented.

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

[How you can improve the appearance of the animation?]

Thank you very much for the tip, I will figure out how to make plugins friends)

[How you can improve the appearance of the animation?]

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?

[How you can improve the appearance of the animation?]

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.

[How you can improve the appearance of the animation?]

@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?

[How you can improve the appearance of the animation?]

@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

[How you can improve the appearance of the animation?]

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.

[How you can improve the appearance of the animation?]

The demo is located at https://mdl95-showcase.ml/z-town/index.html

[How you can improve the appearance of the animation?]

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.

[How you can improve the appearance of the animation?]

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

[How you can improve the animation of the transition between shapes?]

17 hours ago, mikel said:

Hey @.mdl,

 

Try a specific position for the SVGs.

 

svg {
  position:absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  overflow: visible;
  transform: translate(-50%, -50%);
}

 

Your code could be simplified a lot more.

 

 

 

 

Happy scrolling ...

Mikel

@mikel Thanks a lot for this example!

[How you can improve the animation of the transition between shapes?]

I get a bad transition between the first and second figure, I need to do as on the website https://readymag.com/evrone/2744381/3/

Please help me figure it out. I guess that I have problems with the scroll trigger somewhere.

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

[Can gsap be used to implement a similar scroll animation on a site?]

7 minutes ago, Cassie said:

Great! This looks like a fun starter project to get a good understanding of SVG shapes.

I would start off by either hand coding the shapes or using a graphics editor to put the graphic together.

Once you have the pieces then you'll need to animate their x and y position and hook it up to scrollTrigger, like so
 

 

Hope this helps, Happy tweening!

 

@Cassie Thank you very much for this example, now I understand where to go.

[Can gsap be used to implement a similar scroll animation on a site?]

5 minutes ago, Cassie said:

Hey @.mdl

 

Welcome to the forums!

 

This is really nice - have you used SVG before?

@Cassie Good afternoon! No, I have not used svg in animations. The site uses png images.

[Can gsap be used to implement a similar scroll animation on a site?]

I really liked the animation when scrolling on the 3rd screen: https://readymag.com/evrone/2744381/3/

How this can be implemented and you can please examples of implementations. Thansk!