Animate in from offscreen?

[NubieHere 13 Likes (Newbie)]

How would I animate an element in from offscreen (just outside the left and right side of the browser) and into it's initial position?

 

It has a position center screen initially ... and need to have in relation to other elements. I'm thinking; Oh, how do I get the right viewport position and add the width of the element to push it offscreen for that amount. But that seems kind of like rocket science ... I guess there has to be a simpler way?

See the Pen ZELQYop by blaasvaer (@blaasvaer) on CodePen

[Shaun Gorneau 2,037 Likes (Superhero)]

This depends on how it got the center position initially (css properties left, transform, margin-left, etc.). In plain language, you need to set its x position to screen.width minus its current x position plus half the element width. 

[NubieHere 13 Likes (Newbie)]

Thanks, but that seems overly complicated to calculate each individual letters position relative to a responsive layout (yeah, have to work in responsive mode as well) ... I'm also trying to use SplitText plugin, but are having issues targetting the individual letters.

 

I have managed to wrap all letters i span's with matching classes. But now I can't figure out how to target them individually using a timeline ... how can I access a letter by class like this:

 

tl.from(splitText.chars['.m'], { duration: 1, x: 1300}); // .m representing the class of an individual letter.

 

 

[PointC 14,466 Likes (Superhero)]

Who is this mod named @Shaun Gorneau? 🤷‍♂️ 

 

Good to see you Shaun.

 

 

[Shaun Gorneau 2,037 Likes (Superhero)]

2 hours ago, NubieHere said:

Thanks, but that seems overly complicated to calculate each individual letters position relative to a responsive layout (yeah, have to work in responsive mode as well) ... I'm also trying to use SplitText plugin, but are having issues targetting the individual letters.

 

I have managed to wrap all letters i span's with matching classes. But now I can't figure out how to target them individually using a timeline ... how can I access a letter by class like this:

 

tl.from(splitText.chars['.m'], { duration: 1, x: 1300}); // .m representing the class of an individual letter.

 

 

 

I think you may be looking for something like this.

 

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

[Shaun Gorneau 2,037 Likes (Superhero)]

1 hour ago, PointC said:

Who is this mod named @Shaun Gorneau? 🤷‍♂️ 

 

Good to see you Shaun.

 

 

 

I've been hiding 😅

[NubieHere 13 Likes (Newbie)]

Thanks a lot ... I'll see if I can hack something together ...

[NubieHere 13 Likes (Newbie)]

OK, I think I have to elaborate on this to understand what's going on.

I have a string of characters ABCDE.

I want A and B to come in from the left of the screen and D and E to come in from the right – the C stays where it is – in the middle.

Now, I'm trying to 'group' the letters on the LEFT of C to manage them in a separate timeline ... and the letters DE on their own timeline ... for the same amount of control.

 

I've updated the CodePen to illustrate what I'm trying to achieve ... hope it comes across as intended. I'm facing a range of issues; HOW to group things, and what TYPE (.to or .from) to use, and what VALUES to insert in the property ... yeah, that's a lot to not get when trying to use a library ; )

 

 

[NubieHere 13 Likes (Newbie)]

I also think part of the issue is, that I'd like to use the initial position of the letters, so I don't have to fiddle around with specific x and y values in code to place things (therefore prefer to use .from) ... what when the client comes and changes the word? It'll become an unmanagable nightmare ... I want to simply be able to swap the word. And then ('cause I can't avoid it otherwise) add chars[n] to the timeline for control. Yes, still potentially a lot of manual work, but better than none.

[Carl 11,326 Likes (Superhero)]

this seemed like an interesting challenge. hopefully the following will spark some ideas to help you get it to the finish line.

 

First, it's important to note that GSAP has loads of API hooks and utilities to make seemingly complex effects fairly easy without doing any tough math.

 

By using gsap.utils.distribute() and staggering from center you get stuff like

 

See the Pen yLyqVWQ by snorkltv (@snorkltv) on CodePen

Rubberbander lesson from GSAP 3 Beyond the Basics

 

Being that you are very particular about the middle letter staying in center and all the other letters getting sent to opposing sides of the browser window, I think a more custom-coded approach may be necessary.

 

In the following non-animated example I

• find the index of the middle character
• loop through the array of chars
• determine if the current character is to the left or right of middle and place it accordingly (you can do the math to put them "offscreen")

See the Pen yLgemed?editors=0011 by snorkltv (@snorkltv) on CodePen

 

In this next version I animate them in from center. The ease in the stagger object gives you control over the distribution of start times of each character

 

See the Pen eYgJaxM by snorkltv (@snorkltv) on CodePen

 

[NubieHere 13 Likes (Newbie)]

@Carl absolute brilliant, thanks. I need the letters to move at random speed and random interval ... but I guess I'll manage to implement specific timelines for this.

[mikel 4,782 Likes (Superhero)]

Hey @NubieHere,

 

... another idea

 

See the Pen VwPaagO?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy splitting ...

Mikel

 

[MCP 2 Likes (Newbie)]

It's all good but how to avoid having these horizontal scrolls until the animation have ended?

[Rodrigo 5,907 Likes (Superhero)]

Hi,

 

Just wrap the text element (paragraph tag) in a container with overflow hidden to prevent the scroll bar from being visible:

See the Pen gOKZgbO by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!