Jump to content

Guest Arun

SVG icon animation using frames

Moderator Tag
Go to solution Solved by PointC,

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



I'm having bit of a challenge to understand how to use Frames(or is it right thing to use) in a crazy animation project.


The codepen url will give you an idea to the part of my problem that I'm trying to solve. Here I'm using emoji icons lined up one after the other to animate the first 3 seconds of this 49 second video. My project is to recreate the video using GSAP and emoji icons. In this time-frame (3 seconds), I have got 19 icons to animate and all of them appear at varying rate in this time frame as you can see in the first 3 second of the video.


Right now I've give 0.5 second time for each icons. My question is, how should I approach my solution to produce exact reproduction of the video? If using frames instead of seconds, how do I implement it with my current solution.


I appreciate any suggestion and help on this.

See the Pen XdRVdP by nudgepixels (@nudgepixels) on CodePen

Link to comment
Share on other sites

Hi Arun :)


Welcome to the forums.


I think I'd go with a simple stagger on/off here. You can go from 60+ lines of code down to 3.

tl = new TimelineMax();
tl.staggerTo("#dmdAnimation div", 0, {autoAlpha:1},0.5)
  .staggerTo("#dmdAnimation div", 0, {autoAlpha:0},0.5,0.5);

Here's a fork of your pen with that solution.

See the Pen mPmpoW by PointC (@PointC) on CodePen


You have a few icons that show together so you'll have to rearrange your divs a bit, but this would be my approach for you.


Hopefully that helps a bit. 


Happy tweening and welcome aboard.


  • Like 3
Link to comment
Share on other sites

Hi PointC,


StaggerTo is definitely a better way of doing it and thanks for showing me how to use this method. I'm currently implementing the project using StaggerTo and rearranging/grouping div's to match the frame-timeline.


I don't know if you have noticed it in your codepen demo, when using StaggerTo, the method is omitting the first child div under the parent dmdAnimation div. I tried to fix it but its not working. Any suggestion how to fix this?


Thanks again.

Link to comment
Share on other sites

  • Solution

yep - I see that now.


Looks like the 0 duration tween is causing the problem. You can just switch it to this:

tl = new TimelineMax();
tl.staggerTo("#dmdAnimation div", 0.01, {autoAlpha:1},0.5)
  .staggerTo("#dmdAnimation div", 0.01, {autoAlpha:0},0.5,0.5);

You could even increase that duration to something like 0.2 for a really slight fade in/out effect if you like.


Does that work better?


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.