Jump to content
Search Community

_Greg _

Members

  • Posts

    145

  • Joined

  • Last visited

Community Answers

  1. _Greg _ test
    _Greg _'s post in Scrolltrigger pin "jumps" after expanding collapsible element. was marked as the answer   
    Hi!
    you need to refresh ScrollTrigger after css animation was finished. Check ScrollTrigger.refresh()
    Also i add markers: true to display result of refresh (just for debug)
    Also pin: true is the same like pin: ".pinned-section", by default pin pinning trigger element
     

    See the Pen zYPxerO?editors=0010 by gregOnCodePen (@gregOnCodePen) on CodePen
     
     
  2. _Greg _ test
    _Greg _'s post in what gsap plugin this website use? was marked as the answer   
    Sure, you can rewrite it with gsap 3, check migration guide 
     
    The similar examples you can find by chosing filter by Technologies on awwwards site, chose Barba.js, GSAP Animation, Highway.js... filters
  3. _Greg _ test
    _Greg _'s post in I see that using the "repeat:-1" in timeline is breaking the draggable behavior ease flow or triggering timeline start. was marked as the answer   
    Hi! 
    Try this:
    handle.t1 = gsap.timeline({ repeat:-1, onStart() { console.log('start'); }, onComplete() { console.log('complete'); } }) .to("#Handle", { duration: 100, x: 1000, ease: "none" });  
  4. _Greg _ test
    _Greg _'s post in Text distortion on scroll was marked as the answer   
    Hi @samanway! 
    You can SplitText (only for Club GreenSock members) by char (typer: "char") and animate it how you want.
    In your example they change for only few letters with:
    font-weight: 400; font-stretch: 170%; For trigger animation on scroll just use ScrollTrigger plugin (free plugin)

     
  5. _Greg _ test
    _Greg _'s post in Text distortion on scroll was marked as the answer   
    Hi @samanway! 
    You can SplitText (only for Club GreenSock members) by char (typer: "char") and animate it how you want.
    In your example they change for only few letters with:
    font-weight: 400; font-stretch: 170%; For trigger animation on scroll just use ScrollTrigger plugin (free plugin)

     
  6. _Greg _ test
    _Greg _'s post in scrollTrigger scrollTo active class on nav was marked as the answer   
    Hi @DD77 I'm not sure that i understand you well
     
    toggleClass add/remove class to trigger element
    I add in css 
    .active { color: red !important; } and change 
    panels.forEach((panel, i) => {....} part

    See the Pen gOmRyRP?editors=0110 by gregOnCodePen (@gregOnCodePen) on CodePen
     
    That what you need?
  7. _Greg _ test
    _Greg _'s post in Different duration for tweens in the tween was marked as the answer   
    Hi. 
    You can change duration any time you want with .duration() method Documentation
     
    gsap.registerPlugin(ScrollTrigger); let animation = gsap.fromTo( "h1", { yPercent: 300, autoAlpha: 0 }, { yPercent: 0, autoAlpha: 1, duration: 5, ease: "none", repeat: -1 } ); let changeDuration = () => { if (window.matchMedia("(min-width: 801px)").matches) { // >801px animation.duration(5); } else { // <800px animation.duration(1); } }; changeDuration(); // call function any time you want // change duration on resize window window.addEventListener( "resize", function (event) { changeDuration(); }, true );  
  8. _Greg _ test
    _Greg _'s post in Dynamic Update value on TweenlineMax was marked as the answer   
    Thank you Carl,
    I find answer in this forum!
    What i get with your help http://test.rezniklawyers.com/whoweare.html (carousel, with mouse move and press)
    I use your answer on other topic (http://greensock.com/forums/topic/7907-reversing-timeline-animation-and-repeating-it-infinitely/?p=30278):
     
    var tween = new TimelineMax({ onComplete: complete, onCompleteParams: ['{self}'], onReverseComplete: reversethis, onReverseCompleteParams: ['{self}'] }); Then control by:
     
    tween.progress(some_variable_witch_calculate) But have some trouble with CPU usage when carousel moving  , and now working with mobile adaptive to 'pan'/'swipe' events  
×
×
  • Create New...