Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by UncleMuscles

  1. https://codesandbox.io/s/youthful-pare-nnshv?file=/src/page.js


    So I'm learning how to have the smooth scrolling of LS and the sweet animation of GSAP but I have 3 issues.


    First is when I run on a seperate window the animation don't work unless I go and Inspect on Chrome. The the smooth Locomotive Scroll works but as soon as I go full window it stops.


    Second issue is I'm having real trouble with the start and end trigger points and how to set them. As you can see in my demo I have the markers on and while they have helped a bit I am still left stumped any good tutorials?


    Third is, as you can see, My code is quite verbose. How could I condense all thes useRef and gsap.to() calls?


    Thank youuu :)

  2. 9 hours ago, GreenSock said:

    I noticed a few things:

    1. You didn't set the scroller. By default, ScrollTrigger uses the main window/body as the scroller but your setup has no scrolling at all on the body. Your content is inside another <div> that does the scrolling. As a quick fix, I added this to your ScrollTrigger: scroller: start.current.parentNode.
    2. You're animating the opacity of start.current but that element has a height of 0, so you won't see anything :) Maybe you meant imageTwo.current
    3. Both of your images are using the same URL, so you won't really see anything when you crossfade. 
    4. Be careful about using super big images and blend-mix-mode because those are tough on the browser to render (unrelated to GSAP).

    Good luck!

    Thank you for the help Mr Jack :) I think I got a bit confused over the Trigger and Scroller use cases. For some reason it didnt make any changes to my code. I tried to implement what you said to no luck. So now I have tried to dumb it down as much as I can to this.

    gsap.set(imageTwo.current, { opacity: 1 });
        timeline.current = gsap.to(imageTwo.current, {
          opacity: 0,
          yoyo: true,
          repeat: -1,
          scrollTrigger: '#bg'

    Only one of the images has a mixblendmode enabled so  in contratc to the image behind it I should see an effect when fading with the opacity.


    I have ID'd the div container #bg as it holds the Y scroller. I assume this is the scrollTrigger? and has the 2 images inside


    You can see in this example https://stackblitz.com/edit/react-pvbx1r?file=src%2Fcomponents%2Flanding.js That I'm trying to do this animation but with the scroller rather than using yoyo and -1 repeat. If you change the mix-blend-mode on &#imageTwo you can see the diffrent effects that I tihnk would be cool to controll with the opacity and the blend modes via the scroller/trigger


    Thanks for replying Mr Jack :) I wrote out that whole post and then I made it as simple as I could and Now it works :). An example https://stackblitz.com/edit/scrolltrigger-blendmode-example?file=src/components/landing.js

    Thanks for the help :)


    • Like 1
  3. What I'm trying to do?

    I've got 2 images on top of each other I want to alpha-in (opacity)  via the blend-mix-mode layer with ScrollTrigger. 

     position: relative;
      height: 100vh;
      width: 100vw;
      overflow-y: scroll;
      img {
        min-width: 100vw;
        max-width: 100vw;
        height: 200vh;
        position: absolute;
        object-fit: cover;
          overflow-y: scroll;
        &#imageTwo {
          overflow-y: scroll;
          mix-blend-mode: multiply;

    I'm having trouble just getting the images to animate with a scroll bar. I'm using big images about 5000px in size becuase I want them to be in a container with a scroll bar that I can use as the 'Scroller' for the Opacity for the image with blend modes on.


    What I've come up with:

    So far not really much luck. Here is a running view of what I've got so far. https://react-pvbx1r.stackblitz.io/ I have the project here you can see the code at the bottom is the images and the styling is in BackgroundStyle. I feel I have got the right Idea with GSAP in using useEffect to set options after the DOM has been rendered and using useRef for referencing Nodes to give to GSAP. But I don't think my problem is with React. I just cant seem to get the scroll and the animation to work.


    Here is the Editor link https://stackblitz.com/edit/react-pvbx1r?file=src/components/landing.js


    Thanks :)


    P.S I'm learning a bunch of frameworks at the moemnt so there is a chance im using quite a lot of this stuff wrong, if you spot any bits that aren't written well I would be very gratefull if you highlighted them! :D


    All the best :)


  4. 37 minutes ago, elegantseagulls said:

    You can animate strokeDashoffset, and all other svg attributes in gsap just as you would any other property.


    Maybe your target isn't accurate for your animation? also make sure your case is correct strokeDashOffset strokeDashoffset





    For fine tuning your strokeDashArray animation, check out the DrawSVGPlugin: https://greensock.com/docs/v3/Plugins/DrawSVGPlugin 


    Also, we don't recommend using ScrollMagic. GSAP has ScrollTrigger: https://greensock.com/docs/v3/Plugins/ScrollTrigger

    Ahh i see thanks :) I realised that I had set inital values int he SVG and it didnt like that. So once I removed them it ran fine.

  5. Hi, GSAP is awesome!


    I have made an animated 'P' but mainly using SVG <animate> so far I using the SVG to animate strokedash-offset, dash-opacity and fill. I'm aware that I should probably use Draw for the stroke stuff but I can't afford it, I've been out of work for 10 years+ and recently I've decided to become a webdev so I've been designing my portfolio so money is tight.

    I was wondering how would I animate these 3 attributes as I have tried using .to() and putting {strokeOpacity: 0} as it is set to 100% initaly but this does not work. How come? I have also had the same problem with strokeDashOffset and Fill. Hoe can I animate these properties with GSap like I have with SVG  below?




    Ultimatly my goale is to animates these things with scrollMagic. But for now it would b e nice just to animate them. Is this possible?


    Thanks :)