[Clean up "old animation" on window resize? (React)]

This is great @Rodrigo! 

 

Thank you very much for the detailed answer and exemple 🙏

 

 

[Clean up "old animation" on window resize? (React)]

Hi guys, 

 

How would you proceed if you wished to clean up old animations following a window resize? 

 

I have a global state (redux) within my app that updates after window resizing. I have tried to connect my components that use gsap animations  to this global state width and useEffect().

It seems to be working fine meaning that the animations are restarting when I resize however the old animations are still running so it gets messy.

 

How would you guys handle this?

 

Thank you!

[Infinite carousel that moves faster on scroll]

Thanks a lots @ZachSaucier. probably explains why I missed that 🙈

[Infinite carousel that moves faster on scroll]

The images are now moving fine and the infinite loops works.

What still does not work is the offset not being taken into account even though when I console.log it i can see when I enter the scrolling area that my offset value changes but the images are not moving faster. 

 

Any idea what is happening? 

 

Thank you

 

 

 

 

@ZachSaucier I dont think so. 

 

 imgArrConst.map((img,i) => {
            let imgWidth = img.getBoundingClientRect().width
            //initial left position depending on previous photos
            let leftPosition = imagesPosition
            //positioning the images before moving them
            gsap.set(img, {left: (leftPosition)  } )
            imagesPosition += imgWidth
            //calculating total imgs width
            totalW += imgWidth
            //create hash of width per index
            imgWidths[i] = totalW
 })

This fonction above allows me to calculate the totalW of all images combined.

I console.log(totalW) and it seemed to give me the appropriate value.

[Infinite carousel that moves faster on scroll]

Hi guys, 

 

I has been some times I am trying to figure out how I should proceed with an infinite carousel  with images of different widths.

 

Here is my code pen 

 

On codepen the images are not moving but it is working fine on my computer. I am guessing that the code I juste added is not optimised enough (specially the first animation)... 

 

The weird part that I dont get is that my offset initiated through scrolling doesnt work however when i console.log() into the modifiers of my first function I can see it recorded but the images dont move more rapidly.

 

Any idea how I could optimise this code and why offset doesnt work?

 

Thank you!

 

 

See the Pen JjRywdM by skima37 (@skima37) on CodePen

[make a circle out of text]

This is awesome. Thank you all 🙏

[make a circle out of text]

Hi guys, 

 

I am trying to make the following animation. https://rino-pelle.com/contact/ (round text moving)

 

The first question I have in mind is, is there any way with gsap to make a circle out of a text? 

 

Also, as you can see, when scrolling down the speed of the rotation rises. Do we have any similar codepen that I could use to get inspiration from ? I tried to search within the forum but didnt find.

 

Any help is appreciated.

 

Thank you very much! 

[Horizontal infinite slider image of different width]

Thank you @ZachSaucier !

[Horizontal infinite slider image of different width]

As you can see above the way I have implemented is, each element should be wrapped into a different wrap(). Meaning, the element that is the most on the right needs to travel more towards the left in order to complete the window. 

FOr some reason this is not working and each element are travelling the same width...

I am really confused on how I could do that. Also it seems to be very ineffective. Couldnt find anything on the forum that is similar.

Any help is appreciated.

Thank you

[Horizontal infinite slider image of different width]

Hi Guys,

 

How would you deal with images of different width to make it infinite ?

 

 

THanks!

See the Pen JjRywdM by skima37 (@skima37) on CodePen

[Infinite horizontal big text]

Great. Thank you for the answer @ZachSaucier, I was actually looking at some website and saw that they only had one text element however they duplicated the words inside that text element. They probably splitting it up by words then. Make sense.

Thanks!

[Infinite horizontal big text]

Hi guys,

 

I dont understand how I can wrap a big text in order to have an infinite horizontal text.

 

I am trying to reproduce Mikel code pen  but with one text bigger than window width.

 

Here is the codepen I created and would like to tweak accordingly.

 

See the Pen ExgvLLL by skima37 (@skima37) on CodePen

 

Any tips or help is appreciated.

 

Thank you!

 

 

See the Pen oNXoOBq by mikeK (@mikeK) on CodePen

[React - multiple scrolltriggers within one component]

Hey Zach, assigning my ref to a new Const inside my useEffects seems like it is solving my issues!

Thank you

[React - multiple scrolltriggers within one component]

Hi guys,

 

How do I handle having multiple ScrollTrigger functions within 1 component. When I do that it gives me a 'GSAP target null not found.' 

 

Thanks

 

const Test = () => {
  let text = useRef()
  let mainContainer = useRef()
  useEffect(() => {
    ScrollTrigger.create({
             trigger: text,
             start:"top 50%",
             end: "bottom 50%",
             onEnter: function() {
              //gsap function
             },
   )}
     ScrollTrigger.create({
             trigger: mainContainer,
             start:"top top",
             end: "bottom 50%",
             onEnter: function() {
              //gsap function
             },
   )}
  },[])
  
  return(
    <div 
    	ref={mainContainer}
   	>
    	<div
			ref={text}
		>
      		This is a text
      	</div>
    </div>
  )
}

 

[Wrap images for infinite animation]

Hi,

 

I am trying to wrap my images in order to have an infinite animation. I tried to use the wrap method but wasnt successful. 

 

I used to simply duplicate my images and it would work "fine" for most cases but not all. 

 

How would you guys do such a thing with the following codepen : 

 

Thank you!

See the Pen dyppXEO by skima37 (@skima37) on CodePen

[Combining gsap transformation with another scrolltrigger effect]

Thank you @ZachSaucier, this works out good at the moment except the flashing. 

 

In this particular exemple. Is it the wrapping + the updateProgress function that makes the animation infinite?

[Combining gsap transformation with another scrolltrigger effect]

I created the following codepen with the pseudo code you gave me. 

See the Pen QWKEevR by skima37 (@skima37) on CodePen

 

As you can see, the first method is working fine however the second one (the one using scrolltrigger) is buggy at the moment.

What I basically want is that whenever I am scrolling and I am within my scrolltrigger area, I want my images going left faster relative to my scrolling activity.

 

 

Thank you Zach

[Combining gsap transformation with another scrolltrigger effect]

thanks for the reply Zach 

 

So this wouldnt work if I add a duration value? 

items.forEach(item => {
  gsap.to(item, {
    x: -containerWidth,
    modifiers: {
      x: gsap.utils.unitize(x => {
        (parseFloat(x) + additionalY.val) % -containerWidth
      })
    }
  });
});

I wanted my animated to go over all the picture within 40 second so I added to duration: 40 as a paramaters. If i remove the duration parameters it goes way to fast. It takes about one second to go all over the pics.

 

It was working fine, meaning all the pics were moving on their own, however I tried to give a value to  additionalY.val to see if it would go faster but it was changing changing anything. Animation was not going faster. 

 

Also, sorry but I am confused about this part? 

 

    if (velocity > 0) {   
      additionalYAnim = gsap.to(additionalY, { y: 0 });
    }

Did you mean the array of items instead of additionalY? 

 

 

[Combining gsap transformation with another scrolltrigger effect]

hey @ZachSaucier,

 

Thank you for pointing out the different options I have however after some hours looking for the solution, I wasnt able to come to a good one that.

 

I first took care of the scrolltrigger method this way: 

 

        const imagesScrollerTrigger = ScrollTrigger.create({
            trigger: mainSection,
            start:"top 50%",
            end: "bottom 50%",
            markers: true,
            ease: 'none',
            onUpdate: function(self) {
            
              let velocity = self.getVelocity() 
              //first image
              let axis = images[0].getBoundingClientRect().x
              firstImagesAxisValue = axis
            
              if (velocity > 0) {   
                gsap.to(moveImages, {
                    ease: "none",
                    x: calculateNewX(velocity, axis), 
                    modifiers: {
                      x: gsap.utils.unitize(x => parseFloat(x) % -window.innerWidth ) 
                    }, 
                 })

                 timelineImage.pause()

              }
            }
           })

I am quite happy with my scrolltrigger. It is working fine and the images are moving to speed I like. Also I dont want them to move on scroll up thats why I only make change is the velocity is positive.

 

then I set up a timeline as follow :

        let timelineImages = gsap.timeline()
        timelineImages.fromTo(imagesArray, {
          		//x value of my first image 
                x: images.current[0].getBoundingClientRect().x,
                }

            , {
                ease: "none",
                duration: 40,
                x: -window.innerWidth, 
                repeat: -1
            })
        }

My first intention was to do when scrollTrigger onUpdate isActive => timeImages.pause() and when onUpdate is not isActive =>  timeIineImages.play() or .restart() (in order to have  a new accurate value of from x, since this one was modified by the scrolltrigger)

 

Is there anyway to do such a thing or I try another way?

 

Thank you!

[Combining gsap transformation with another scrolltrigger effect]

Hi,

 

I am trying to implement the first horizontal section effect of the following website:  https://rino-pelle.com/

 

Images are moving from right to left when you are not doing anything BUT moving faster when scrolling down.

 

I know how to accomplish the first part using as example the following code: 

 

        gsap.to(movableImageWrapper, 
            {   xPercent: -100, duration: 40, repeat: 100, 
                ease: 'none'}, '<'
            )

 

I also know how to accomplish the 2nd part using scrolltrigger: 

        gsap.timeline(movableImageWrapper, {xPercent: -100,
            scrollTrigger: {
              trigger: mainSection,
              start:"top 50%",
              end: "bottom 300",
              scrub: true,
              toggleActions: "play none none none",
            }
          })

 

However where I am confused is how to combine both because if I try doing this my scrolltrigger function will move my images depending of their original axis not the current one (not sure if I am clear).

 

How would you guys proceed with that? is there anw to track the first transformation ?

 

Thanks for the tips

 

Btw I am using react but js is fine as well

 

Thank you

[Change background color from top to bottom]

Hi guys,

 

Is there any simple way to change the background color of a div from top to bottom and vice versa? 

 

Thanks!

 

p.s: I was trying to add a small video of it but was limited to a file of 25.8kb?

 

[React-Locomotive-GSAP markers disappeared]

Hey @akapowl, thanks for the reply. I did try with locomotive or smooth-scroll but I have the same issue still happening. I believe it is probably a react issue with my dom fully loading after my gsap animation so that the height given to gsap is wrong.

Anyway for now I will live it aside because I am not so sure I want some smooth scrolling on my app for user experience.

[React-Locomotive-GSAP markers disappeared]

Hi guys, 

 

I have added smooth scrolling within my application using locomotive. I have added it on top of my App component. It is working good and is not messing up with my animations that use scrolltrigger within my main App component however my animations that uses scrolltrigger within my children components don't work anymore. 

My triggers markers disappeared. 

 

In my main component I have added:

      const locoScroll = new LocomotiveScroll({
        el: smoothScroll,
        smooth: true,   
      });
      locoScroll.on("scroll", ScrollTrigger.update);

 

I am sure it is something dumb but what is the norm for working with both (gsap and locomotive) within React?

 

Thank you!

[Parallax effect on footer?]

Awesome ! Thanks a lot @akapowl. Works like a charm for my footer but now is messing up with some of my animations using scrolltrigger in other components but thank you!

 

[Parallax effect on footer?]

Hi @akapowl, thank you so much for your detailed answer as well as all your demos!!! it's awesome.

So far I have just incorporated the first version with gsap only because I am not familiar with smooth scrolling and never worked with this library as well.

I will look at smooth scrolling this coming week because even though gsap makes it super nice and really easy, smooth scrolling makes this effect even neater.

Once this is done I will try to upload a pen for all the react users.

Once again thank you for your time and explanations!

Maxime