Jump to content
GreenSock

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

Animating multiples photos profiles from right to left infinite

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

Hi Everybody,

 

I am a newbie to GSAP, I'm trying to animate dynamic profile photos (except to have more than 50).
I want the animation to start from the left CSS value and disappear to the left and then repeat by appearing to right and disappear to the left.

I also want to change the scale property at some points during the animation. I used TimelineMax with staggerFromTo but the first photo profile does not appear again until the animation of the last one is completed. I want the photo to appear again as soon as it completes animation and from a different Y position.

 

Can someone please give me some hints and any kind of advice/help for me to get started. This is very urgent for the project I am working in.

See the Pen vdqpOm by probee (@probee) on CodePen

Link to comment
Share on other sites

Hi @babacar,

 

Welcome to the forum.

 

It's difficult to understand the desired result you'd like for your project. I'm not sure what 'start from left and disappear to left' means exactly?  If you use the search feature of the forum (upper right on the menu) and type 'slider' or 'slideshow' for your search terms, you'll find quite a few threads with excellent examples that can help get you started.

 

As far as your specific questions, you'd really need to provide a demo so everyone can better understand what you're trying to do. It doesn't need to be anything fancy. Actually, the simpler the better. Maybe use three pictures or even just a few plain colored divs as placeholders. Try to demonstrate what you'd like to happen so that we may better assist you.

 

Please review this post to see about making a demo.

Once you have a working demo, please post it back here with GSAP specific questions and the community should be able to point you in the right direction. 

 

Happy tweening.

:)
 

  • Like 3
Link to comment
Share on other sites

Hi @PointC,

 

Thanks for your reply, here is 

See the Pen vdqpOm by probee (@probee) on CodePen

  of I want to realize.

The starting has to be from CSS left values and I also want to scale up and scale down at some points of the animation.

On mouseenter the all animations must pause and resume on mouseleave.

 

Any help will be very welcomed.

Link to comment
Share on other sites

Hi babacar,

 

I think for your project you should probably be using individual tweens for each picture, not a single timeline. This is because a single timeline will basically work on all of the pictures as if they were a single block, so it would need to finish animating the very last picture before it starts again with the first one. You could also have two overlapping timelines, with the second one starting before the first one ended, but that's probably going to lead to headaches.

 

So, You should probably try making a simple tween that animates one picture from the right to the left, and then use a for() loop to apply the same logic to all of your pictures; for each of them you would add a delay to the tween so that they don't all start at the same time. (This will also probably make it easier to scale them on mouseover later on as well.)

Link to comment
Share on other sites

Hi @Accent,

 

Thank you for your response. I will try that asap and let you know if it's working as expected.

 

Thank you again.

  • Like 1
Link to comment
Share on other sites

@babacar I looked at your CodePen and it *appears* that you would like the group of elements (what I assume to be profile photos) to move as a group across the page. Should this group loop to give the appearance of an infinite number of profile photos moving across the page (even though it is simply repeating)? Or is there something else in mind?

Link to comment
Share on other sites

Hi @Shaun Gorneau,

 

What I want is each <div>(profile photo) to move across the screen and repeat itself immediately so I do not have the container empty at some points. 

When I made a group, the first element repeat itself just after the last one complete the animation and it's not the result that I want

Link to comment
Share on other sites

28 minutes ago, babacar said:

Hi @Shaun Gorneau,

 

What I want is each <div>(profile photo) to move across the screen and repeat itself immediately so I do not have the container empty at some points. 

When I made a group, the first element repeat itself just after the last one complete the animation and it's not the result that I want

 

OK, no problem (if I understand correctly). So the trick here is to duplicate the entire group and append it to the DOM. Then you can tween the entire group to move half the distance of the width of the entire group (i.e. the width of the original non-cloned group) and set the tween to repeat infinitely.

 

Here is a rudimentary example of this. I have not accounted for spacing and container widths with respect to viewport etc. But, the top shows a row of squares moving left of the screen and then repeating when all are off the screen.

 

The second row is constructed (in HTML) and styled (width CSS) identical to the first row ... I've just used a single line of jQuery to clone the items in the row and append them to the existing square's parent. And then with its tween, simply set it to move half of its width before repeating itself ... giving the illusion of moving and repeating infinitely.

 

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

 

  • Like 3
Link to comment
Share on other sites

I still think that just animating each picture individually is a better approach in this case :P

Link to comment
Share on other sites

1 minute ago, Acccent said:

I still think that just animating each picture individually is a better approach in this case :P

 

I'm interested in reading why? Perhaps I missed something here that I'm not addressing. If (and this is a big if) the photos are not moving at different relative speeds and are "locked" in with each other, a single Tween moving the group seems to make the most sense. A single tween removes all need to account for relative placements, relative timings, multiple tween controls (when hovering a profile photo, for example), etc.

  • Like 1
Link to comment
Share on other sites

@Shaun Gorneau,

 

Thanks for the trick,  I think the suggestion of @Accent will be better because I will want to control each element inside the animation by scaling up at 1/3 of the animation and then scale down before it disappears. 

 

I am out of office now but I will test both approaches and will let you know the one that is better in my case.

 

Thank you 

Link to comment
Share on other sites

I was going to say, because babacar will need to iterate over every picture anyway to add the scale animation. However one other thing I forgot about is that the whole group must stop moving when hovering over any of the element. It would be annoying to have to pause all of the individual tweens...

 

So, I think there should probably be a combination of both, maybe with the two timelines idea I mentioned above. I'll make a quick demo.

  • Like 2
Link to comment
Share on other sites

37 minutes ago, babacar said:

@Shaun Gorneau,

 

Thanks for the trick,  I think the suggestion of @Accent will be better because I will want to control each element inside the animation by scaling up at 1/3 of the animation and then scale down before it disappears. 

 

I am out of office now but I will test both approaches and will let you know the one that is better in my case.

 

Thank you 

 

I think you would be missing out on some of the simplicity that a single timeline would afford. Here is a quick example of a single timeline that loops and repeats, along with pause on any "item" hover and scaling that item up on hover, scaling back down on mouse out.

 

See the Pen GQbbYN?editors=0110 by sgorneau (@sgorneau) on CodePen

 

***EDIT***: I see that you are saying scale up 1/3 of the way through the animation. I don't know why I was misreading that as scale up 1/3 (in size) while hovering. My mistake.

  • Like 3
Link to comment
Share on other sites

One quick question ... are they scaling at 1/3 of their own Tween (regardless of were they are on the screen), or is the intent to have each scale up/down when they reach certain trigger points with respect to the viewport width?

Link to comment
Share on other sites

Hi @Shaun Gorneau,

 

Thank you for the demo and your response. I appreciate.

The intent is the second option,  having each scale up/down when they reach certain trigger points with respect to the viewport width.

 

Link to comment
Share on other sites

  • 3 years later...

@Shaun Gorneau I liked your approach here however there is a delay when the objects are wrapped; it might have to do with the screen width.  Could you apply this same logic with a modifier?

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