Jump to content
Search Community

lucky111

Premium

  • Posts

    18

  • Joined

  • Last visited

 Content Type 

Posts posted by lucky111

    Scroll ends - nice ScrollAnimation

    in GSAP

    Posted

    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

    ScrollTrigger and Lottie animation flickering problem

    in GSAP

    Posted

    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?
     

    ScrollTrigger and Lottie animation flickering problem

    in GSAP

    Posted

    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?


     

     

     

    See the Pen MWpYoWp by lucky111 (@lucky111) on CodePen



     

     

     

     

    See the Pen jOBEmRq by lucky111 (@lucky111) on CodePen

    Any way to account for different scrolling speeds using ScrollTrigger

    in GSAP

    Posted

    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

    • Like 1
    • Thanks 1

    Hook a Lottie animation up to ScrollTrigger

    in GSAP

    Posted

    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?

     

    Hook a Lottie animation up to ScrollTrigger

    in GSAP

    Posted

    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

     




    See the Pen QWdjEbx by GreenSock (@GreenSock) on CodePen




     

    What approach is the best!!


     

    See the Pen 7e302171605cbc4274ce44733189ffe9 by chrisgannon (@chrisgannon) on CodePen

×
×
  • Create New...