MarcFN

Hello Greensock Team, I would like to create an animation like this: https://gallery.power-ecard.io/ecard/bNGkYMkc But I can't really get the page flip to work. Is there a script that gives me the basics? Regards, Marc

Hello dear Greensock team,I have the following requirement.There is a lot of content on one of the client's page. Therefore I want to reload certain content via HTTP GET.But the reloaded content contains an animation. But this animation is not working.Generally, when the page is loaded, it looks for the animations. But the animation which is not loaded yet can not be found. I have understood this as far as it goes.If I now call the additional code for the animation that is loaded with the HTTP GET call, then the animation works.The problem is now that after the loaded content, further down still animations take place. These are also pinned. But these animations do not know that another content has been added and that they should start much later. I tried it with refreshTrigger() and ScrollTrigger.refresh(), but it doesn't work.It is a bit complicated to explain. Is there a demo for this?Best regards from Lake Constance,Marc

Hello Rodrigo, thank you very much for your answer. Greetings, Marc

Hi mvaneijgen, I have taken the original version and have set the refresh according to the instructions https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh() But nothing happens. Then I even tried to call the function via onclick function when I click on "Wrapper 2". Also there nothing happened. Here now the updated code https://codepen.io/MarcFN/pen/gOdPpJb

Hi mvaneijgen, where exactly would I have to place the ScrollTrigger.refresh(); if I want to try it this way? I just tried it, but it does not work. Thanks for your answer, Marc

Hello mvaneijgen, thank you for the tip and your super fast reply. Marc

Hello Greensock Team,and already I have the next question.I think once I understand this, then I'm a good step further.I have extremely reduced the script, but I can't figure out why it doesn't work.There are 3 wrappers. As soon as wrapper 1 is in the ViewPort, I want to run an animation over the whole screen height. So far this is all understandable for me.But when wrapper 2 comes into the ViewPort and arrives at the top of the screen, the animation should run, then wrapper 3 already starts at the bottom.And I don't understand that. Why does wrapper 3 come before and not when the animation in wrapper 2 is finished.I hope I was able to explain this in a reasonably understandable way.Greetings,Marc https://codepen.io/MarcFN/pen/gOdPpJb

Hello mvaneijgen, thank you very much for your answer and especially for your detailed explanation. For a beginner this is already quite complicated. Thanks again Greetings from Lake Constance, Marc

I just want that after the end of the animation the visible area stays a bit when you scroll further. Because so it looks like the area is already pushed further up although the animation is not yet over. Sorry that I still have so little experience

Somehow I don't understand it. I have tried here, but it does not work. Any tips? https://codepen.io/MarcFN/pen/PodPPXO

Thank you very much, exactly what I needed

Hello Greensock Team,in the following example the screen stops as soon as the Start trigger element arrives at the top.Now the animation runs until the trigger element end arrives at the top of the screen.Now the animation is over and the lower area becomes visible.Is there somehow a possibility that I can still scroll for example 200px further and the lower area is not yet visible.I hope I have expressed myself reasonably understandable.Greetings from Lake Constance,Marc https://codepen.io/MarcFN/pen/zYJxvBY

Hi Greensock Team, now I have the next problem. If I give an animation a class with the property "display: none", and then remove the class with a function, the animation is not displayed correctly. What am I doing wrong, what to look for here? Thanks for your answer in advance, Marc https://codepen.io/MarcFN/pen/OJwYEJE

Thank you for the correction, I still have a lot to learn.

Hello Greensocks Team, this has worked wonderfully. Now I have developed the animation a little further. What I don't understand now is why the text color of the second section (Headline 2) only changes when the scroller end is already at 50% of the view height. Do you have a tip? Greetings, Marc https://codepen.io/MarcFN/pen/BaPvEvB

Thank you for the super quick reply. I will take a close look at it. Greetings, Marc ?

Hello Greensocks team, I am just trying to get into the animations of GSAP. I'm a member of creativecodingclub and have already looked at a few things there. I would like to use the SplitText plugin in several sections, but it doesn't work. When the animation runs in the first section, it runs in the second section at the same time. Would be great if you could help me further. Greetings from Lake Constance, Marc

Thank you very much for your reply, at the first moment it looks quite good. But now in practice it turns out that if I pull the display smaller than 600px the content does not adapt (responsive). Is there a solution for this? Thanks for your answer in advance, Marc

Thank you for your answer. Too bad I didn't find it myself. Greetings from Lake Constance. Happy Weekend!

https://www.polestar.com/at/polestar-1/ Please scroll down to "Precision". Now you see the smaller text which changes its color by scrolling. Is this also possible with GSAP? Thanks for your answers in advance