Jump to content

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

Moving and blinking animation

Recommended Posts



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.





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

Link to comment
Share on other sites

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:



  • 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




And tips on sequencing your tweens and timelines



Also instead of delay you can use the position parameter:




  • Like 1
Link to comment
Share on other sites

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



Link to comment
Share on other sites

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() {

This is the codepen for you: 

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



GSAP Enthusiast

  • Like 2
Link to comment
Share on other sites

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.







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.