Jump to content
Search Community

Lins

Members

  • Posts

    7

  • Joined

  • Last visited

 Content Type 

Posts posted by Lins

    Best approach making two timeline with same object

    in GSAP

    Posted

    13 hours ago, mvaneijgen said:

    Just have two images and set one to opacity: 0, and one to opacity: 1 and then in the timeline at the end switch the opacity of the two. 

    Hi @mvaneijgen I did what I want with Flip! Thank youuuu.

    But based on my last question about changing images, do you have an example for that? 🤔

    Best approach making two timeline with same object

    in GSAP

    Posted

    2 minutes ago, mvaneijgen said:

    The best approach is always one timeline with one ScrollTrigger and in this case the Flip plugin would be a great fit, check out this demo below. Hope it helps and happy tweening! 

     

     

     

    Thank you for your fast respond @mvaneijgen
    Ah I see, so I need to reconstruct what I've done.

     

    Oh and one more,
    Is it possible to change the "image" when the last timeline triggered?

     

    My goal is to change the image when the image arrived on the left of wording (in my case is Mission Section).

    Hope you get it : ))

    Best approach making two timeline with same object

    in GSAP

    Posted

    Hi GSAP Team,

    I have a requirement to create two timelines on the same object, my problem now is the animation looks jumpy when scroll fast (I think its because immediateRender: false) and also I think using "x" and "y" to moving the object is not a good approach.
    And I think I don't need "pin" for this requirement.

    Would you mind giving me the best approach for this condition?

    Hope you guys undertand what I need :)

    See the Pen BaEozbv by aditlin (@aditlin) on CodePen

    Making "a timeline" with Scroll Trigger

    in GSAP

    Posted

    3 hours ago, GreenSock said:

    It's great to hear that you're jumping in to learn the tools more, @Lins

     

    Usually it's best to just tackle one thing at a time instead of cramming 4 questions into one post which can be a bit overwhelming. I'm not entirely sure what you're trying to do, so I can't assess what is "good" or "bad", but maybe this is a good starting point?: 

     

     

     

     This looked very odd to me:  

    "top bottom+=-25%"

    Did you mean?: 

    Which would be more simply written as:  

    "top 75%"

    Anyway, I hope that gets you going in a good direction. 

    @GreenSock Hi there!
    Aight! thank you, next time I will ask step by step to make it easier.

     

    Thanks to fix my codes! Yes, you are right! What I mean is   

    "top bottom-=25%"

    And yes, that's exactly what I want!
     

    But I don't want to remove "active" class *except* User scroll back to top.

    I tweaks the codes from your last fix, but when I scroll to top, all active class on List removed instantly. What I want is each Item removed by scroll when the User scroll back to top

     

    Sorry if what I made confused you, I'll try to tweaks the codes a bit & explain here:
    In this Strategy Section, user can scroll to bottom and the timeline move down like now (solved), however later when the User scroll down, the ".timeline-li.active" will trigger the image ".strategy-image .image" on the left to change / stack to another image.

    Is it clearer now?:)

     

    Just give me the clue, so I can learn from it and give back to you when its done!

    **I already changes the codes

     

    Making "a timeline" with Scroll Trigger

    in GSAP

    Posted

    Hi GSAP team,
    I often use GSAP for a long time but just "copy pasting" the codes....
    And now, I really want to expert it  (going to buy your license in near time!)

    I have a couple question, actually a lot...
    Hope you can bear with me  :)

     

    1. Is there any wrong / bad syntax on my approach? Would you "correct" or tell me what's bad/wrong in my GSAP codes.

    2. How to make the .draw-line class slower to bottom when I scroll it? I mean the duration. I do research and implement it, but it didn't work (I already take it out)

    3. I want to add ".active" on ".timeline-li" when .draw-line start triggering. I already did it, but the "active" class removed automatically when it's outside the trigger area
     

    4. I also want to change the image on the left, when the second .draw-line triggered. (We can talk later once these three are resolved)

     

    I'm so sorry if my question is too da*n much, hope any of you can help me out.

    Thank you, so so much!
     

    See the Pen KKJQXYm by aditlin (@aditlin) on CodePen

×
×
  • Create New...