Jump to content
Search Community

Basic Wrap / Append for Marquee Effect

pietM test
Moderator Tag

Recommended Posts

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

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

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

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

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

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

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

  • 5 months later...
On 7/20/2021 at 10:25 PM, ZachSaucier said:

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. 

 

Hi @ZachSaucier, I've been hunting for ages and found this to be the closest ticker/marquee example to what I'm looking to achieve.

 

Could I ask for a little more explanation of how to reverse the direction of one of the lines of text?

 

Forgive me for one more question - Also looking to remove the click/drag functionality so it's just a straight constant animation... have studied the related helper function cross referenced your last pen in this thread with several other examples of this effect and I'm struggling to work these two things out, as every marquee method seems to be different/increasingly complex!

 

Thanks in advance!

Link to comment
Share on other sites

1 hour ago, Mattrudd said:

Will have another go at interpreting the helper doc further down the line.

I didn't write the helper function with the goal of folks totally understanding everything in there - I wrote it mostly to simply provide the functionality and be efficient, so don't feel like you've gotta dissect it and understand every piece. Most helper functions are for people who are like "I need _____ but I can't figure out how to do it on my own...does GreenSock have something that could help?" 

 

So you can just copy/past the helper function and call it, feeding in whatever parameters it needs. Done. 

 

Good luck!

Link to comment
Share on other sites

26 minutes ago, GreenSock said:

So you can just copy/past the helper function and call it, feeding in whatever parameters it needs. Done. 

Roger that, thanks!

 

Trouble I'm having is I'm not yet at the GSAP mastery phase just yet to work out how to apply the effect to a second wrapper, or indeed to find the correct parameter for reversing this second instance

Link to comment
Share on other sites

4 minutes ago, Mattrudd said:

Trouble I'm having is I'm not yet at the GSAP mastery phase just yet to work out how to apply the effect to a second wrapper, or indeed to find the correct parameter for reversing this second instance

 

You would just call the function again, but don't reverse the second one like I did in my demo.

 

let loop1 = horizontalLoop(".box-1", {
  reversed: true,
  repeat: -1
});

let loop2 = horizontalLoop(".box-2", {
  repeat: -1
});

 

  • Like 2
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.
×
×
  • Create New...