This is great thank you! one question, the animation does not appear to start till the second slide as that is when the sliderchange is initiated. the first slide is loaded with no animation. do you know a fix for this?
Thanks for your feedback Michael! 🙏🏾 So if you want for example the initial headline to be animated you can hide it in Webflow and use gsap on page load to reveal & animate it. You can currently see the same effect on my WTTF homepage ✌🏾 Here is how to use js to checking the page loaded: window.addEventListener("load", (event) => { // Your code });
Hi. Wie verknüpfe ich die Animation mit einem dynamischen CMS-Slider? Da man eine Klasse als target der Animation nutzt, wirkt sich die Animation auf den schwindenden und den erscheinenden Slide aus. Ich möchte aber dass auf dem schwindenden Slide der Text langsam verschwindet und auf dem erscheinenden Slide der Text sichtbar wird. Bisher habe ich noch keine Kombination aus Event, Target und Animation gefunden, die funktioniert. EDIT: Eben nochmal deine Lösung in Slo-Mo angesehen - bei dir verschwindet der Text auch instant auf dem schwindenden Slide. Da deine Transition schnell und der Text relativ klein ist, fällt das aber nicht weiter auf. Bei einer fetten Headline wirkt es leider wie ein Glitch.
Hi! Du kannst gsap auch mit ID‘s füttern. Statt gsap.from(„.class“) nutze gsap.from(„#id“). Zusätzlich kannst du in die Timeline weitere Animationen einspielen, um die Headline smooth auszublenden. Schau mal in die docs .. sind relativ intuitiv 👍🏾
Hey there! 👋🏾
Thanks for watching!
I am curious - Would you like to see more videos using *Webflow with custom code* ?
This is great thank you! one question, the animation does not appear to start till the second slide as that is when the sliderchange is initiated. the first slide is loaded with no animation. do you know a fix for this?
Thanks for your feedback Michael! 🙏🏾 So if you want for example the initial headline to be animated you can hide it in Webflow and use gsap on page load to reveal & animate it. You can currently see the same effect on my WTTF homepage ✌🏾
Here is how to use js to checking the page loaded:
window.addEventListener("load", (event) => {
// Your code
});
Hi. Wie verknüpfe ich die Animation mit einem dynamischen CMS-Slider?
Da man eine Klasse als target der Animation nutzt, wirkt sich die Animation auf den schwindenden und den erscheinenden Slide aus. Ich möchte aber dass auf dem schwindenden Slide der Text langsam verschwindet und auf dem erscheinenden Slide der Text sichtbar wird.
Bisher habe ich noch keine Kombination aus Event, Target und Animation gefunden, die funktioniert.
EDIT: Eben nochmal deine Lösung in Slo-Mo angesehen - bei dir verschwindet der Text auch instant auf dem schwindenden Slide. Da deine Transition schnell und der Text relativ klein ist, fällt das aber nicht weiter auf. Bei einer fetten Headline wirkt es leider wie ein Glitch.
Hi! Du kannst gsap auch mit ID‘s füttern. Statt gsap.from(„.class“) nutze gsap.from(„#id“). Zusätzlich kannst du in die Timeline weitere Animationen einspielen, um die Headline smooth auszublenden. Schau mal in die docs .. sind relativ intuitiv 👍🏾