Jump to content
GreenSock

noviedo

ShockinglyGreen
  • Posts

    26
  • Joined

  • Last visited

Community Answers

  1. noviedo's post in Adding elements dynamically, ScrollSmoother doesn't work. [ 动态添加元素,ScrollSmoother无法正常工作 ] was marked as the answer   
    Hey @Ryan Lee, how's going? I just add a ResizeObserver in your code to listen to the ".viewport" size changes. Also, I wrapped the ScrollTrigger.refresh() into a delayedCall() just to simulate a debounce function.

     
    const container = document.querySelector(".viewport"); const resizeObserver = new ResizeObserver((entries) => { gsap.delayedCall(0.2, () => { ScrollTrigger.refresh(); }); }); resizeObserver.observe(container);
     
    I don't know in which framework you are working, but please, don't remember to clean up the resizeObserver, just to keep clean the memory.
    resizeObserver.disconnect()

    I hope this helps you!.
     

    See the Pen poLJvga by nazarenooviedo (@nazarenooviedo) on CodePen
  2. noviedo's post in FOUC not working properly was marked as the answer   
    Hey @cereal_beast, how's going?

    You are using a .from() function, so in this way, you will never get the correct autoAlpha because you are set the opacity in 0, probably you will need to use a .to() function to trigger the opacity. I did a quick fork from your pen and fixed it, just check it.
     
    I fixed your syntaxis regarding the duration position, and also I split the animation into two tweens, a from() function for all properties and just a to() function to the autoAlpha. With the last parameter in the to() tween ('<') we reach to execute both tweens at the same time.

    I hope helps you!
     

    See the Pen mdxJdad by nazarenooviedo (@nazarenooviedo) on CodePen
  3. noviedo's post in FOUC not working properly was marked as the answer   
    Hey @cereal_beast, how's going?

    You are using a .from() function, so in this way, you will never get the correct autoAlpha because you are set the opacity in 0, probably you will need to use a .to() function to trigger the opacity. I did a quick fork from your pen and fixed it, just check it.
     
    I fixed your syntaxis regarding the duration position, and also I split the animation into two tweens, a from() function for all properties and just a to() function to the autoAlpha. With the last parameter in the to() tween ('<') we reach to execute both tweens at the same time.

    I hope helps you!
     

    See the Pen mdxJdad by nazarenooviedo (@nazarenooviedo) on CodePen
  4. noviedo's post in Is there a method that can run a function after gsap.to was marked as the answer   
    Hey @nthpolygon how is going?? I leave here an example with 2 alternatives, but the onComplete should be doing the same thing.
     
    Using onComplete:
     
    const tween = gsap.from(["h1", "p"], { yPercent: 30, autoAlpha: 0, stagger: 0.1, paused: true }); gsap.to("body", {   autoAlpha: 1,   duration: 0.5,   onComplete: () => {     tween.play();   } }); Using .then():
     
    const tween = gsap.from(["h1", "p"], { yPercent: 30, autoAlpha: 0, stagger: 0.1, paused: true }); gsap   .to("body", {     autoAlpha: 1,     duration: 0.5   })   .then(() => {     tween.play();   });
    I leave here the Codepen:

    See the Pen mdXZMQg by nazarenooviedo (@nazarenooviedo) on CodePen

  5. noviedo's post in Skew on scroll with ScrollTrigger - but with a horizontal scroll plugin? was marked as the answer   
    Hey @andsavu, I leave here a pen with a solution for your issue, so, as you can see I did a correct bind for ScrollTrigger and Smooth-Scrollbar, if you will use just a horizontal scroll you need to do this:
     
    // Setup Scrollbar const scroller = document.querySelector("#scrollbar"); const bodyScrollBar = Scrollbar.init(scroller, { overscrollEffect: "bounce", alwaysShowTracks: true, delegateTo: document }); ScrollTrigger.scrollerProxy(scroller, { scrollLeft(value) { if (arguments.length) { bodyScrollBar.scrollLeft = value; } return bodyScrollBar.scrollLeft; } }); Then we need to bind the listeners and a quick default setup for ScrollTrigger to enable the horizontal scroll and setup a scroller.
    bodyScrollBar.addListener(ScrollTrigger.update); ScrollTrigger.defaults({ scroller: scroller, horizontal: true }); And also I added some stuff to improve the code, for example with this line you can be sure to avoid all time the yAxis. 
    bodyScrollBar.track.yAxis.element.remove();
    Codepen:

    See the Pen YzWgJWw by nazarenooviedo (@nazarenooviedo) on CodePen


    I hope to help you 🙂
  6. noviedo's post in SVG Sine Wave Timeline was marked as the answer   
    Thanks so much! you gave me a great idea, I just use a a fixed width for the viewBox and just move the inner group along x axis.
     
    Thanks!
×