Jump to content
Search Community

Can you "wrap" an animated element to next line?

wcomp test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Is there a way using GSAP to achieve this effect using only one ".bluebox" element? To wrap the element in a sense?  The fact that it is coming into view on the lower line before it is fully out of view on the upper line requires that there be two .bluebox elements. Is there a way to do this kind of thing with only one element? Thanks!

 

See the Pen XOpmJM by Wcomp (@Wcomp) on CodePen

 

See the Pen XOpmJM by Wcomp (@Wcomp) on CodePen

Link to comment
Share on other sites

@wcomp If what is shown in your CodePen is (visually) the desired outcome, then you need two elements to animate. But that doesn't mean you need two distinct elements in your markup (not sure if that's what you're asking though).

 

If the timing can be such that the lower instance doesn't come into view until the top instance is out of view, then you can do it with one.

  • Like 3
Link to comment
Share on other sites

Just now, Shaun Gorneau said:

@wcomp If what is shown in your CodePen is (visually) the desired outcome, then you need two elements to animate. But that doesn't mean you need two distinct elements in your markup (not sure if that's what you're asking though).

 

If the timing can be such that the lower instance doesn't come into view until the top instance is out of view, then you can do it with one.

Hey! Yeah. I know I can do it that way. I need the lower one to become visible before the upper one is completely off the page though. How can I do that with one distinct element in my markup? Is that possible?

Link to comment
Share on other sites

What I mean is you can use Javascript itself (in this case jQuery, since you're already using it) to duplicate the bluebox for presentational purposes, but leave it out of the markup.

 

See the Pen NodxRg?editors=1010 by sgorneau (@sgorneau) on CodePen

 

But because they are Tweening at the same time ... they will need to be seen (tweened) as distinct elements.

  • Like 3
Link to comment
Share on other sites

1 hour ago, Shaun Gorneau said:

What I mean is you can use Javascript itself (in this case jQuery, since you're already using it) to duplicate the bluebox for presentational purposes, but leave it out of the markup.

 

See the Pen NodxRg?editors=1010 by sgorneau (@sgorneau) on CodePen

 

But because they are Tweening at the same time ... they will need to be seen (tweened) as distinct elements.

Thanks! Didn't think of that. What would be the benefit of doing it that way as opposed to having it twice in the markup? Just less clutter in the code?

Link to comment
Share on other sites

11 hours ago, wcomp said:

Thanks! Didn't think of that. What would be the benefit of doing it that way as opposed to having it twice in the markup? Just less clutter in the code?

 

Yup, that's it! I'm a bit a progressive enhancement nut, so I opt for minimal HTML. So basically, if an element's purpose is to be manipulated by Javascript (for either presentation or interaction), then it must (for me) be created by Javascript.

 

 

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