Jump to content
Search Community

Need guidance on how to make this animation! example on jsfiddle

greenscript 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

Hello Greensock community! I'm trying to create an animation and I've been struggling for a bit now, I was wondering if someone could guide me a little bit, 

this is the animation: https://jsfiddle.net/veke646L/4/, the problem that I'm having, is that I can't seem to get this working without blank spaces on the page, I would like to keep the animation flowing with no blank spaces on the container, and well, also possible ways to optimize the code and the animation overall. Thanks before hand and to anyone who took the time of reading this and watching the animation.  

Link to comment
Share on other sites

Following example uses modifiers plugin, which lets you read values in the middle of animation and modify those values. You will have to change your approach and restructure your HTML. You can use 3 rows without needing to modify javascript.  You will have to reduce the number of elements or make wrapper long enough that elements don't overlap.

 

NOTE: you will have to update the logic that positions elements but that should be easy.

 

You can read more about ModifiersPlugin

Here is another thread by @OSUblake that explains wrapping function which wraps the elements on overflow.

 

See the Pen vebQor?editors=1111 by Sahil89 (@Sahil89) on CodePen

 

  • Like 3
Link to comment
Share on other sites

I have updated the demo now you can make it work with the way you want.  You will need to position those images as you need them for animation. After that they will animate and wrap by keeping same distance as long as you set number of elements and wrapper width correctly.

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