Jump to content
GreenSock

Martio

ShockinglyGreen
  • Posts

    6
  • Joined

  • Last visited

Posts posted by Martio

  1. Hi, I created something like the following before actually seeing the gsap website's footer logo section:

     (gsap with react)

     

    However what I wanted to achieve was more like the GSAP footer logo section, where the logo's fade in and out at different times, independently and at random spots. My logos are randomized in their location, but fade in and out together, which isn't really ideal. 

     

    Any guidance would be appreciated, I am a gsap newbie.

     

    Thanks

     

     

    See the Pen OJjmzpx by m-a-r-t-i-n (@m-a-r-t-i-n) on CodePen

  2. 14 hours ago, akapowl said:

     

    For the lines that are supposed to be moving to the right, you will likely have to make sure that they start with their right side against the right side of the window (which is basically where you are tweening the other one to); so I would probably make use of a fromTo tween for that, with which you can declare their starting position in the from part - something like I did in this horizontal-scrolling example.

     

     

     

     

     

     

    That pen creates a ScrollTrigger forEach of the 'sections' - which can give you a bit more control.

    Here's what that could look like with your example

     

     

     

     

     

     

    Thank you so much akapowl - that worked perfectly :) Really appreciate it.

    • Like 2
  3. 59 minutes ago, OSUblake said:

    Welcome to forums @Martio

     

    Have you checked out our Helper Functions? You can use the Loop function to create a marquee effect. To reverse direction, just use onToggle a ScrollTrigger to toggle the reverse state of the animation.

     

    https://greensock.com/docs/v3/HelperFunctions#loop

     

    Or for smoother effect, animate the timeScale to play and reverse the loop.

    const myAnimation = horizontalLoop(...);
    
    ...
    onToggle({ isActive }) {
      gsap.to(myAnimation, {
        timeScale: isActive ? 1 : -1
      });
    }

     

    Thanks for the welcome and fast response.

     

    I am not really looking to do a marque with repeating/looping words. 

     

    I have updated my codepen with the latest code: 

    See the Pen MWozEdr by m-a-r-t-i-n (@m-a-r-t-i-n) on CodePen



    However the reverse (second line) doesn't really work so great, especially across differing resolutions/device widths.

  4. Hi All

     

    I am new to gsap.

     

    What I am trying to achieve is a scrolling horizontal animation where the 1st, 3rd, 5th lines of text (if exist) scroll to the left on vertical scroll and the other lines (2nd, 4th, 6th etc) scroll to the right (and the reverse when scrolling back up). Each row (line) could have any number of words. I want the words to all be revealed gradually during the vertical scroll.  Ideally each line will scroll just enough in whichever direction to reveal all the words, and not further. 

     

    I am actually using React for the project but my codepen isn't.

     

    I am using the ScrollTrigger gsap plugin.

     

    I really hope this makes sense.

     

    Many thanks.

    See the Pen MWozEdr by m-a-r-t-i-n (@m-a-r-t-i-n) on CodePen

×