Jump to content
Search Community

UserX

Members

  • Posts

    12

  • Joined

  • Last visited

 Content Type 

Posts posted by UserX

    HOW WE CAN IMPLEMENT MULTIPLE LOTTIE FILES USING SCROLLTRIGGER

    in GSAP

    Posted

    I've two lottie json file in this pen and i want to animate one json file at a time on single scroll. also same for rest

    (second scroll occurs when it complate the second json animation too !)

    Basically it's not work with scrub i tried with some other ways seems like not work well  in reverse mode might be lottie animation will work without mouse scrub.
    Hope you understand :)

     

     

    HOW WE CAN IMPLEMENT MULTIPLE LOTTIE FILES USING SCROLLTRIGGER

    in GSAP

    Posted · Edited by UserX
    description was not good

    Hi there,i hope you fine there GSAP community and I've been using gsap and multiple plugins over the last couple days. For the most part I've found my way around but been stuck on this for the past day.

     

    >> I'VE CODEPEN FILE WITH LOTTIE ANIMATION HERE  

    >> TO IMPLEMENT LIKE THIS : 

    See the Pen GRgjBdJ by andystent (@andystent) on CodePen



    ONE SCROLL ONE JSON WILL COMPLATE JUST LIKE SLIDE ANIMATION IN SECOND CODEPEN LINK :)

    See the Pen zYzEGge by barheimcoder (@barheimcoder) on CodePen

    pinned container images swap

    in GSAP

    Posted

     

    21 hours ago, akapowl said:

     

    I wouldn't exactly call that an issue - according to the logic provided that is what is supposed to be happening in that case.

     

    If you don't want to use a diferent approach from the ground up but still want things to trigger differently when scrolling back up in comparison to when scrolling down (which would be the consequence of what you described as the 'issue') you will have to expand the logic a fair bit.

     

    Usually figuring out logic like that is not what is provided as free support on these forums, but for your convenience, here is one possible example of how to get it working - what I added first and foremost  is a check on the scroll-direction (which I get via the onUpdate of the ScrollTrigger).

     

    Depending on wether scrolling up or down, the currScroll will be either what was provided in the original demo of the OP or what I suggested in my reply. When approaching it like this though, there is another check neccessary to make sure the image doesn't change to the 'wrong' one midst scroll when changing direction - done in this following example by an extra check on added nextContent and respective marker.next/marker.previous variables.

     

    I can not give you any guarantee that this is the best way to do it or aven a bulletproof solution but it works for me at this point. 

    Hope this at least helps you head in the right direction with this.

     

     

     

     

     

     

     

    I'm afraid I can not help you much with that one - if it works in codepen but doesn't work on your website, it is very likely that it is related to the setup of your website somewhere.

    Thanks for the quick support

    Hello GSAP scrolltrigger community
    => i am facing the issue while working with above example in mobile screen (iphoneX) i really tried to implement with several ways but the above code but didnt get the result from this could you please help me in this example.

     

    pinned container images swap

    in GSAP

    Posted

    On 3/29/2021 at 10:02 PM, akapowl said:

     

    Hey @rahul dev - welcome to the forums.

     

    You could simply adjust the position that is being checked upon

      

    

  //const currScroll = scrollY;
  const currScroll = scrollY - window.innerHeight;

     

    Does that work better for you?

     

     

     

     

     

    Hello Mate above example creating issue while in reverse scroll.

    => when we scroll in reverse the  image before image (image - 1) is show without even text change
    => tried to change the code but didn't get well result. 
    => when we try to integrate the above codepen code into any webpage above code is breaking i don't know why ?

    Elements are not working properly on screen2 leave and screen1 enter

    in GSAP

    Posted

    Hello Greensock community
    i am facing the issues in above codepen can you help to solve below two issue and why they are creating problem. 

    => WHEN SCREEN 2 IS STARTING ALL THE RIGHT SIDE TEXT CARDS ARE CHANGING SO FAST AND NOT WORKING WITH LEFT CARDS  WITH TIME EXAMPLE => (BANK-CARD-IMG === BANK-CARD-TEXT).

     

    => WHEN WE REVERSE THE SCROLL FROM SCREEN-2 TO SCREEN-1 ALL LEFT SIDE CARDS ARE NOT WORKING ACCORDING TO SCREEN 1   AND BREAKING CARD ANIMATION.

    See the Pen XWRoJqy by vijaysolankiii (@vijaysolankiii) on CodePen

    Elements are not working properly

    in GSAP

    Posted

    Hello Greenshock Community.
                         I'm, so glad that i got this awesome plugin to enhance my web application with great animation but then i stuck with problem where I'm trying to implement the two timeline in single section. 

                        where i want to animate first timeline but second timeline elements are executed first and all elements are set according (with respect to second timeline) to second timeline but when i scroll bit then first timeline started animating with their elements and i figure out the problem but i can't find on exact greenshock forum due to lack of searching skill.  problem is second timeline elements is overright (second timeline element set value is overright with first element) before the first timeline elements.when i reverse the scroll also there second timeline animation is executed before the first timeline. 

    can you provide me the solution where we can stop second timeline with certain amount of time when first timeline is executing and then second timeline will execute and when we scrollback then second timeline will execute and first will not execute till when it came using scrolling

    i hope you understand my query waiting for you're positive response 
     

    animation.zip

    trying to implement the smooth animation like proxy.com (card-animation-first banner) with card clicks and return text in right side

    in GSAP

    Posted

    Hello Greenshock Community.
                         I'm, so exited and pumped working with scrolltrigger and i made many things with help of scrolltrigger forum. but I'm stuck the  another animation where i want to make the card-animation like the proxy.com.
                            I trying to implement my animation like proxy.com where all card will scroll slowly and move slowly and fit into mobile screen then mobile screen will change with second mobile images while scrolling when i scroll card will scroll like first come and will go to last like so on (1,2,3,4 => 4,1,2,3)
     

    See the Pen XWRoJqy by vijaysolankiii (@vijaysolankiii) on CodePen

×
×
  • Create New...