Different widths - same duration

[usr1931990 1 Likes (Newbie)]

Is it possible?

I have many divs with text that have different width. I want them to move at the same animation speed. This is my code:

 

    startRolling: function($text, $wrap) {
      let duration = $wrap.width() / 40;
      TweenMax.to($wrap, duration, {
        x: -($text.width()),
        ease: Linear.easeNone,
        repeat: -1
      });
    }

 

So this doesn't work, and setting the duration manually to for instance .9 obviously doesn't work.

 

Thanks!

[Shaun Gorneau 2,037 Likes (Superhero)]

@helleholmsen,

 

There are a few times in the past where I've shown how to deal with similar speeds over different distances. Maybe these can help,

 

See the Pen grLqYB by sgorneau (@sgorneau) on CodePen

 

See the Pen mWEddP by sgorneau (@sgorneau) on CodePen

 

I'll try to find others (I wasn't very good at categorizing them ? )

 

[PointC 14,466 Likes (Superhero)]

My two cent approach:

 

See the Pen ardXWP by PointC (@PointC) on CodePen

 

Happy tweening.

 

[Shaun Gorneau 2,037 Likes (Superhero)]

xPercent: -100,
x: window.innerWidth

 

[usr1931990 1 Likes (Newbie)]

Thank you @Shaun Gorneau the last one with the text was exactly what I needed!

[GreenSock 18,890 Likes (Superhero)]

Very nice indeed, @PointC and @Shaun Gorneau

[Visual-Q 979 Likes (Leader)]

51 minutes ago, PointC said:

My two cent approach:

 

 

Very elegant Craig... a thought on how to make it responsive.

 

See the Pen byEZqK by Visual-Q (@Visual-Q) on CodePen

[PointC 14,466 Likes (Superhero)]

Sweet work @Visual-Q ?

 

Looks like this thread is getting pretty clever. I think we have one of these happening.

 

[Visual-Q 979 Likes (Leader)]

An extension to the previous pen...

 

In typical fashion around here, one thing leads to another and gets completely off the original topic. Extending Craig's elegant 

x: window.innerWidth

I think I might have come up with a fairly decent option for making transform based animations responsive. It basically uses the parent element as a stage and modifier to animate relative to it.

 

See the Pen XwXQGV by Visual-Q (@Visual-Q) on CodePen

 

 

[GreenSock 18,890 Likes (Superhero)]

You guys are having way too much fun with this 

 

Love it. 

[Dipscom 3,376 Likes (Superhero)]

Look at you lot, making translating boxes on a screen fashionable.