Aitor

Trying to animate a radial gradient background in a loop. The background has three radial gradients: background: radial-gradient(100% 102.5% at 16% 80%, rgba(0, 133, 255, 0.76) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(100% 102% at 80% 20%, rgba(0, 133, 255, 0.76) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(100% 100% at 20% 80%, rgba(255, 245, 0, 0.76) 0%, rgba(255, 255, 255, 0) 100%); It works but the first iteration doesn't take the initial values set it in CSS file. It seems to animate from 0 values. Any help appreciated. Thanks. EDIT: embedded codepen doesn't work well in firefox but it works in Chrome

Trying to change background color to different color for each loop iteration using onRepeat callback. It doesn't work. How can I acheve this? Thanks. let R, G, B, dur; const setVars = () => { R = Math.floor((Math.random() * 255)), G = Math.floor((Math.random() * 255)), B = Math.floor((Math.random() * 255)), dur = Math.floor((Math.random() * 4)); } const getColor = () => { setVars(); return `rgb(${R}, ${G}, ${B})`; }; setVars(); TweenMax.to(".colores", { duration: dur, backgroundColor: getColor, repeat: -1, onRepeat: getColor(), });

Understood! Thank you, @Carl

Yes! Thank you very much for the quick and accurate answer.

Trying to test onStart and onComplete callbacks: this code write 'play' and 'finish' in the console at the same time (immediately start time). What is wrong here? How can I fire a function when timeline ends? Thanks! function bannerDown(){ let tl = new TimelineMax({ onStart: console.log('play'), onComplete: console.log('finish'), }); tl .to('.content', .5, { paddingTop: bannerHeight, ease: Power4.easeOut, }, 0) .to('.banner', .5, { y: 0, height: 'auto', ease: Power4.easeOut, }, 0); return tl; }