Jump to content
GreenSock

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

Animate in from offscreen?

Recommended Posts

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

Link to post
Share on other sites

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. 

Screen Shot 2021-03-25 at 11.30.52 AM.png

  • Like 4
Link to post
Share on other sites

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.

 

 

Link to post
Share on other sites

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

 

Good to see you Shaun.

 

 

  • Haha 3
Link to post
Share on other sites
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

  • Like 5
Link to post
Share on other sites
1 hour ago, PointC said:

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

 

Good to see you Shaun.

 

 

 

I've been hiding 😅

  • Haha 3
Link to post
Share on other sites

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

Link to post
Share on other sites

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 ; )

 

 

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

 

  • Like 5
Link to post
Share on other sites

@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.

Link to post
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.

×