Jump to content
Search Community

Fading in and out - opacity 0, 1, 0

Jsimer test
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

Hi. I have not been able to find  a solution and was hoping someone could help. Basically, I am trying to fade in/out an svg during the animation. At start, I would like to have the opacity transition from 0 at 0 seconds to 1 at 5 seconds (or half way through) and then again transition to 0 at 10 seconds (or the end of the animation). I need this animation to repeat infinitely. How can I achieve this? 


var snow = $("#snowflake");
var tl = new TimelineMax();var bezierPath = [{ x: 5, y: 4 }, { x: -5, y: 8 }, { x: 5, y: 12 },{ x: -5, y: 16 }];
tl.add(TweenMax.set(snow,{autoAlpha:0}));tl.add(TweenMax.to(snow, 10, { bezier: {
            type: 'soft',
            values: bezierPath,
            smoothOrigin: true,
            timeResolution: 12,
          }, ease: Linear.easeNone, repeat:-1, autoAlpha:0}));


Link to comment
Share on other sites

  • Solution

Hi Jsimer :)


Welcome to the GreenSock forums.


There would be a few ways to do that, but I think the easiest would be to add another autoAlpha tween to the timeline with a duration of 5 seconds (half of your main tween duration) and then repeat it once with a yoyo. Like this:

tl.to(snow, 5, {autoAlpha:1, repeat:1, yoyo:true, ease: Linear.easeNone}, 0);
// note the 0 at the end is the position parameter so both tweens start at 0

You can then set your entire timeline to repeat rather than the snow tween. I pasted your code into a quick CodePen and used a div for the snow since I have no idea what you SVG looks like, but you'll get the idea.


See the Pen 81706c8372d6e34b126a32afccd995c8 by PointC (@PointC) on CodePen


If you have additional questions, it's best to provide a CodePen so we can see your code in action and make edits. Please see Carl's blog post for more info about that:




Hopefully that helps a bit.


Happy tweening and welcome aboard.


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