Moving and blinking animation

[Pebble 1 Likes (Newbie)]

Hi

 

Many thanks to the moderators for their help with GSAP

 

I need to be able to make moving animations blink or pulse.

 

I have been able to do this using several tweens that move, blink and then restart, move and blink etc but this is choppy and not

very elegant. I am sure there is a simpler way to do this but I don't know what it is. I wondered if there was a solution with the onRepeat function?

 

I have created a codepen where I have a block moving and blinking over the complete duration of its path but I want to be able to control it's opacity in more detail.

 

 

For example, it moves for a second or to a certain point and then it's opacity becomes zero, and then then returns to 1 and then seamlessly carries on its path for another second where it blinks again.

 

Is it possible to do this with a single expression on one tween or do you have to chain animations together to make it work.

 

One other question I have is about compatibility. I have tested GSAP on Chrome, Firefox, IE, Opera, iOS and Chrome on Android. It works fine on all that. I was wondering if it's compatible with other Android browsers?

 

Many thanks for your help. I think GSAP is great.

 

Pebble

 

 

See the Pen RGgJrA by anon (@anon) on CodePen

[Jonathan 5,176 Likes (Superhero)]

Hello Pebble, and Welcome to the GSAP forum!

 

What you have is fine but have you looked into using autoAlpha property instead of alpha which is the same as opacity.

 

autoAlpha is part of the CSSPlugin:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

• autoAlpha
  Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

//fade out and set visibility:hidden
TweenLite.to(element, 2, {autoAlpha:0});

//in 2 seconds, fade back in with visibility:visible
TweenLite.to(element, 2, {autoAlpha:1, delay:2});

You can also use a fromTo() tween if you like so you can set the start and ending values inside the tween

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/fromTo/

 

And tips on sequencing your tweens and timelines

 

 

Also instead of delay you can use the position parameter:

 

 

[Pebble 1 Likes (Newbie)]

Hi Jonathan 

 

Thanks for your reply.

 

I may not have expressed what I was trying to do so I created another pen:

 

See the Pen amQbqg by anon (@anon) on CodePen

 

In this pen I have a box animating across the sreen but it is very choppy and I want to create a nice smooth animation

where the block is blinking on and off.

 

I am not sure if I am going about this the right way?

 

Many Thanks

 

Pebble

[WarenGonzaga 64 Likes (Contributor)]

I think this is the animation you want to achieve? Please let me know thanks!
Hope it helps...

window.onload = init; //first initialize the animation

var el = document.getElementById("element"); //object

function init() {
  blinking(); //blinking animation
  movement(); //movement animation
}

function movement() {
  TweenMax.to(el, 2, {x: 500, ease:Power0.easeOut, onComplete: stop});
}

function blinking() {
  var tl = new TimelineMax({repeat: -1});
  
  tl.to(el, 0.5, {alpha: 0})
    .to(el, 0.5, {alpha: 1});
}

//this will kill all the animation
function stop() {
  TweenMax.killAll();
}

This is the codepen for you: 

See the Pen vXQOYz by Waren_Gonzaga (@Waren_Gonzaga) on CodePen

 

 

GSAP Enthusiast
Waren

[Pebble 1 Likes (Newbie)]

Hi Warren

 

Yes, thanks a lot that is exactly what I was trying to achieve.

 

That has helped me a lot.

 

I was trying to get it to work like this box taken from some of Diaco's code:

 

See the Pen VKVGBz by anon (@anon) on CodePen

 

Diaco pen here:

 

See the Pen EjwQgp by MAW (@MAW) on CodePen

 

Your solution is great.

 

Cheers

 

Pebble