As you can see, the animation looks like everything works as it should within the “Animation build preview” but when you go to the site preview to test the changing slides, the large blue text doesn’t show. I’m not sure if its stuck at 0% opacity or something, but in the screen recording I explain how I tested whether it was the opacity (I removed the opacity completely from the animation) and I’m still getting the same issue.
I’ve been fighting with this hero slider text for weeks if I’m honest! I first wanted to make the Hero a CMS option so it was easily changeable but that was an insane headache! For instance the animations would constantly loop and trigger completely out of time etc.
So I switched to the “hardcoded” version of the hero-slider that you see in the screen recording, and currently live on the link below, but even this is giving me issues!
Hi Jorge! I’ve been digging into your animation issue, and while I haven’t completely solved the issue, I think I see where the issue lies. Webflow is a bit weird with the ‘initial state’ functionality, and it (in my experience, anyway) isn’t a fan of this property being used when there are multiple sets of animations that impact the same element. I understand why you did it this way, and it SHOULD work, but it doesn’t.
You’ll notice if you uncheck ‘initial state’ on heroMidText in the “Hero-Text Slide (IN)” animation, the text persists as expected and the result is great. My only issue now is stopping the text from appearing by itself on first load.
This will be a great starting point for me to mess around and make changes. At least now I know what part of it to attack!
What I’ll do for now is duplicate the site and continue playing around with it there so as to not mess with the version you’re playing around with now!
**
I think what I’ll try is creating an animation on page load to hide and reveal the text on the first slide that only triggers upon first load, then leave the slide animations as they are, but without any initial state.
**
Fingers crossed this should work and I’ll make an update soon.
Who knew slider text animations could get so complicated haha!
100% appreciate your help mate, it’s really been a pain in my side!
Worked a treat to just add that page load hide animation. To be fair, I came to a much more crazy version of doing these animations when I was trying to have the Hero-Slider run using the CMS, but I had like a bunch of animations and it didn’t seem like good practice. So I was trying my best to make everything “best practice”, but it looks like a workaround was needed anyway!
Much love to ya Chrissy, thats a massive headache off my plate now haha.