lucky111

Is it a way to build this elastic header effect with gsap? https://codepen.io/olach/full/NqrYQL When I try this in my iphone it is a litle bit flicking. My be we can geting it to work better with gsap

Thanks Cassie Now it have an name Intresteing!!

I have seen a kind of very nice UX when you scroll to the top of a page in several apps and pages. The page expand and bounce back .... Do you guys know what I mean Has this behavior a name in the UX world? Is it possible to get at web page to behave like this using ScrollTrigger?? Maybe someone has done this already, but I don not know what to search for, becouse I don't know what it is called. In this movie clip from my phone on Swedish TV app you can see this nice behavior. https://ext.dn.se/qs/widgets/test/test.mp4

O thanks for the screenshots It i locked outside sweden for some reaseon

skipp the screenshot here is a working link https://ext.dn.se/qs/widgets/patron/FullScreenWidget/index.html?id=6995

It is verry strange I whould be verry thankfull if you can take a screenshot

Ooo I'm sorry Just klick on the yellow button

I'll like to share some things me and my team mates at Dagens Nyheter have done latly using GSAP. 9-11 graphic using GSAP ScrollTrigger and Lottie Looks coolest in our mobile app but it looks good at the web also Feel free to give us feedback https://www.dn.se/varlden/vad-var-det-som-hande-den-11-september-2001/

Big thank you GreenSock and Cassie for sorten this out. The new animation runs really smooth now! Thanks!!

Yee I think we are something on the tracks here But why is the flickering only aper in long lotties. Watch the scrollbar, the Lottie film in the examples is a quite long lottie, much longer than the animation part. If you clone and fix with the pen and change the lottie url to this (a lottie that is just as long as the actual animation) https://assets2.lottiefiles.com/packages/lf20_ljas34zn.json You will see that the animation is incredible smooth and nice I myself has hard to see how the length of the lottie interacts with the ScrollTrigger / gsap / scrub code and make this flickering aper. What is your best guess Cassie?

Yes but why is not this flickering showing up in the second approach? It's the exact same lottie file with the same scroll length (the scond approche is the upper pen of the two. A little confusing but I'm not able to change the order)

Hi We have previously discussed witch of the two implementations of ScrollTriger controlling a Lottie animation is the best and most effective. There are two 1. The one shown in the examples at greeensock https://greensock.com/docs/v3/HelperFunctions#lottie 2. Ant the one implemented by the user Chris Gannon https://github.com/chrisgannon/ScrollLottie In a previous thread we agreed that the first approach seems the best and most effective, but in a resent project I'm working with I'm starting to notice some flickering in the Lottie animation witch was disapered when I switched to approach 2. The flickering starting appear in very long Lottei animations. Then object that are moving fast in the animation starts to flicker. I have made two pens to point out this problem You can here see how the flickering only appear in the approach 1 pen. I'm curious to now what causes this Do you guys have any clue? https://codepen.io/lucky111/pen/jOBEmRq https://codepen.io/lucky111/pen/MWpYoWp

Thanks GreenSock I have implemented it in my project and it works very well. My next issue is should I use native scroll or should I use some scroll jacking

Thanks Shrug I hope @GreenSock will explain this in detail to us

Ok In Chris code you can skip a gsap.to animation if you set the duration to zero. In the GSAP helper you always have on gsap.to and controll the duration with a scrub value may be it all boling down to the same