CSS parameter : change during the animation

[jbonlinea]

Hi,

 

in order to provide a smooth feedback to the user, I wanted to change some CSS parameter during the animation.

 

When static, my element have an opacity of 1, but I would like their opacity to be 0.5 during the animation. Well obviously I would like the opacity to go from 1 to 0.5 and back to 1 during the animation.

 

After some search on the forum I couldn't come up with a better solution than that :  toggle a/some class.es that contain some transform with duration and delay to time the change. However it seems very inelegant, and problem prone.

 

Is there a proper/elegant way to implement this with gsap or idealy within a flip animation set with the flip pug-in ?

 

on the pen attached,  the opacity change would apply to the .box elements

 

Thank's in advance for your hindsight

See the Pen 38e53f4da66c134a385f3d74dec6374f by GreenSock (@GreenSock) on CodePen

[ZachSaucier]

Hey jbonlinea. The simplest way is to just create a timeline for your secondary animation:

See the Pen ExKBzWy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You could also do it in a single tween if you use GSAP's slow ease with the last parameter set to true. See GSAP's ease visualizer for what that looks like.