Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pietM

Basic Wrap / Append for Marquee Effect

Recommended Posts

Hi everyone, 

 

I'm looking for a simple expression for the enclosed marquee. I know this is a common question, but I haven't been able to find a reduced example in GSAP v3. I have a basic tween for reference. 


I appreciate your attention, as always, 
M

See the Pen BajdWra by euqio (@euqio) on CodePen

Link to comment
Share on other sites

Hey piet. This is indeed a common question :) 

 

Most recently answered here (another method in the same thread later on):

 

 

  • Like 1
Link to comment
Share on other sites

Thanks, Zach! 

 

The examples are always helpful. But in linked examples, the individual cells have a fixed width. Is there an example with varying widths? I was able to achieve the the effect here, but I can't duplicate the animation for multiple uses on a single page. I've tried this with  "document.querySelectorAll("ul").forEach(ticker => {" but it just aggregates all the elements into single "wrapper".

 

See the Pen jOWLxdM by euqio (@euqio) on CodePen

 

Appreciate any help here.


Many thanks,

Link to comment
Share on other sites

That's because your variables are not scoped to the ticker instance. Make sure that all of your selectors inside of the loop are scoped to that ticker.

  • Like 1
Link to comment
Share on other sites

Thanks for this, Zach. 

 

As always, you're a great help. But, I'm still unable to get this to work. I've tried to scope the selectors to the "ticker" instance, but lost the draggable function and still can't multiply the ticker. 

 

This is a foundational animation, so I'm using it to better acquaint myself with GSAP's syntax. 
Thanks for all! 

 

See the Pen VweQayd by euqio (@euqio) on CodePen

 

Link to comment
Share on other sites

Hey Piet. It looks like the pen has been deleted now? Did you figure it out?

  • Like 1
Link to comment
Share on other sites

Thanks for getting back, Zach. 

 

I really appreciate it. 
Unfortunately, no. I deleted the updated pen after tinkering without any luck. I've reproduced it here: 

See the Pen NWxMdpW by euqio (@euqio) on CodePen

 

And would love to receive any help here. 

Thanks again for following up! 

Link to comment
Share on other sites

It's just a matter of setting things up correctly including scoping the variables like I said. Note that I only cloned the first list item. You'll need to clone as many as are required to fill the entire viewport's width. Also note that I didn't add resize handling.

See the Pen mdVLWQO?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Awesome. Thanks again for following up, Zach!

 

I added the enclosed listener function, but when I resize the browser, the marquee accelerates its duration (but maintains the width!).  

- -

window.addEventListener("resize", setPosition);

setPosition(); 

- -

See the Pen NWxMdpW by euqio (@euqio) on CodePen

 

Link to comment
Share on other sites

Hey piet. Unfortunately we don't have the capacity to build out the entire project for every person who posts in the forums. If you have a question related to GSAP we're happy to help :) 

 

Happy tweening.

  • Like 1
Link to comment
Share on other sites

Thanks again, Zach. 


Hopefully my last GSAP-specific question for the thread: 

 

See the Pen NWxMdpW by euqio (@euqio) on CodePen

 

I have a play(0); set on resize and just need to reset the totalDistance and clone. I've tried restating the animation and 'totalDistance' var, but the clone doesn't repeat on resize. After tinkering for hours, I still don't know what I'm missing here. 

Thanks again. 

Link to comment
Share on other sites

Hey Piet. I'm not sure what you're expecting the .play(0) to do besides make the animation go to its start point. That's all it does :) 

 

To get things working on resize you need to update the distance and thus the tween:

See the Pen gOPKGjo?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

Thanks again for the follow up and continued assistance here, Zach!

 

This really is a huge help. 

I really appreciate it and hope it helps others too. 

 

Okay, no more questions from me. 

This is exactly what I need. 

 

Thanks again,

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Following up on this thread with a quick question. 

I've noticed on mobile that scrolling down resets the animation (calls the window resize function, playing the timeline from zero). 

Is there a way to avoid this, so the animations play without resetting on scroll? 

Link to comment
Share on other sites

You could measure the change in the resize and only do stuff if it's over some minimum.

Link to comment
Share on other sites

Thanks, Zach. 

 

That set me on the right path. Not entirely a matchmedia / media query solution, but this fixed the mobile issue for me: 

 

let cachedWidth = $(window).width();	
$(window).resize(function(){
    
var newWidth = $(window).width();
if(newWidth !== cachedWidth){
			
if(anim) anim.play(0);
totalDistance = $(ticker).width() / 2;
    
    	anim = gsap.to(ticker, { 
      	duration: dur,
      	x: -totalDistance,
      	ease: "none",
      	repeat: -1, 
      	overwrite: true
    	});	
        
cachedWidth = newWidth;
        
}
});

 

Probably not the most elegant fix, but happy the timelines are preserved on scroll without resetting. 

Reposting if it helps anyone. 

 

See the Pen RwaKmOw by euqio (@euqio) on CodePen

  

  • Like 1
Link to comment
Share on other sites

  • 10 months later...

How can the animation direction be reversed?

 

On 7/10/2020 at 4:04 PM, ZachSaucier said:

Hey Piet. I'm not sure what you're expecting the .play(0) to do besides make the animation go to its start point. That's all it does :) 

 

To get things working on resize you need to update the distance and thus the tween:

 

 

 

Link to comment
Share on other sites

Hey informanimated and welcome to the GreenSock forums.

 

13 minutes ago, informanimated said:

How can the animation direction be reversed?

You'd need to position it so that one copy is to the left of the viewport instead of to the right, making sure that the wrapping is happening for the updated positioning. You'd also need to change the sign of the x value in the animation. 

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×