Jump to content
GreenSock

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

Fading in and out - opacity 0, 1, 0

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,
            autoAlpha:1
          }, ease: Linear.easeNone, repeat:-1, autoAlpha:0}));

 

Link to comment
Share on other sites

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:

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

:)

  • Like 4
Link to comment
Share on other sites

Hi PointC. Thank you so much for the warm welcome and providing me with a solution. Really appreciate it! 

  • Like 1
Link to comment
Share on other sites

Happy to help - that's how we roll in the GreenSock neighborhood.  ;)

  • Like 1
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.
×