lucky111

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

I'm batteling the same problem but my focus is various mobile devices and the different scroll implementations. Most of my users viewing from iPhones on a WKWebView. I have been testing all day and here is my findings. 1. The scroll don't need to be exactly the same speed or smootness for all platforms, the user lerns in some seconds how the page works and how to scroll the page in a suitable way. 2. To gain best controll over the scroll in WKWebView I use the smooth-scrollbar proxy implementation. It seems to work best, and it allows you to acually stop scrolling on a click (important) 3. Iphone in a common safari window has a fantastic smooth scroll feeling and in this setup you dont need any proxy or ease or dampning

Thanks Cassi for your fast response When I look in the code the approch is complete different i looks to me in The gsap example gsap.to(playhead, { frame: animation.totalFrames - 1, ease: 'none', onUpdate: () => animation.goToAndStop(playhead.frame, true), scrollTrigger: st }); }); You use scrolltrigger inside a gsap.to animation of the whole Lottie animation But in Chris code ScrollTrigger.create({ trigger: obj.target, scrub: true, pin: true, start: "top top", end: endString, onUpdate: self => { if(obj.duration) { gsap.to(timeObj, { duration: obj.duration, currentFrame:(Math.floor(self.progress * (anim.totalFrames - 1))), onUpdate: () => { anim.goToAndStop(timeObj.currentFrame, true) }, ease: 'expo' }) } else { anim.goToAndStop(self.progress * (anim.totalFrames - 1), true) } } }); He create a scrolltiger and do a lot of small gsap.to animations I'm very keen to understand the diffrent approches for those two way to code this task?

Hi I testing to connect a Lottie animation to scrolltrigger. In the documentation there is a nice example with a pin thats work wery well. https://greensock.com/docs/v3/HelperFunctions#lottie It refere to a guy named Chris Gannon who has develop a tool for this and work as an inspiration for the example i guess. When I study the two examples I can notice quite a different in approach in solving this. Both examples working well for me but I'm curios to know whats the differance and witch approach is the best and most effective. https://github.com/chrisgannon/ScrollLottie The two pens https://codepen.io/chrisgannon/pen/7e302171605cbc4274ce44733189ffe9 https://codepen.io/GreenSock/pen/QWdjEbx What approach is the best!!