Modern slider background question

Support
#1

Hi, see here:

I have used your full screen slider demo content.

I have the next slides background animating in, using css…plus some lottie files animations happening.however, the animation starts when the page loads, (so if a person takes longer on the 1st slide, more than the transition time, the animation doesnt appear as it has already loaded and gone) rather than when the next slide loads…is there a way I can make the animation start when the next slide loads?

I dont want the whole 2nd slide fading in, as I need the logo to stay crisp, and at 100% opacity…

Is there anyway of triggering the animations I have in the 2nd slide, when the 2nd slide loads?

A bit like you have in your " Hero Prompt Slider" demo…you click to the next slide, and there are things animating in, but only animate when the next slide loads.

Thanks.

#2

Hello @logoglo,

Thanks for writing in! Please be advised that elements inside the slides in “Hero Prompt Slider” demo is using Scroll Effects. The Slide has some scroll effects too.

Screen Shot 2022-09-15 at 7.39.53 AM
Screen Shot 2022-09-15 at 7.39.53 AM982×348 33.1 KB

Screen Shot 2022-09-15 at 7.40.01 AM
Screen Shot 2022-09-15 at 7.40.01 AM912×728 45.8 KB

If you are not familiar with the Effects Module, please check out this documentation so that you can apply it to your Slides and Elements on the slides as well.

Best Regards.

#3

Thanks, but for example, if I add a scroll effect, or fade effect to slide 2: it applies it to the whole slide and contents…I don’t want the logo or text to fade in…only the background, how do I apply the fade in, only to the background image?

At the minute, I have had to add css animation on the background image to make it act like it is doing (ie background fade in, logo stays 100% opacity) However, that animation triggers on page load, not on the 2nd slide load…so again, the animation starts loading while the person is on the 1st slide, and thus looses its effect if the user spends more time on the 1st slide.

Also, I have a div, with a lottiefile animation inside there, the animation, as I said above, starts as the page loads, not when the 2nd slide loads…so even if I put a delay on the effects on the div, the animation comes and goes (loads on page load) so if you take longer than 2 secs on the 1st slide before clicking the box (to move to the 2nd slide) the animation has played already, even with delay on.

Hence, I need all the animations in slide 2 to load when slide 2 loads, not when the page loads.

Thanks,

#4

Hey @logoglo,

That’s not possible. You will want to substitute the background with a Div with Image element inside it. Set the Div to Position Absolute and set it up to fill the slider. You can then apply effects using the Effects Module to the Div.

Please show us the Effects Module settings you used. If you’ve applied custom CSS animation or 3rd party animations, it’s only natural that it will not be according to the slide transition.

According to our Sliders doc here: https://theme.co/docs/sliders#using-scroll-effects

Child Element Scroll Effects within a Slider are not synced with the Transition control values of the Slide Container, allowing you to performed stepped animations and time things out in creative ways.

Thanks.

#5

Thanks, yeah, I thought about doing a div, and that has worked for the background…the only issue now is the lottie files…

I have raw content, with the lottie script inside, inside a div…and Im animating the div on scroll . But its still loading the lottie animation on page load, rather than slide/scroll load.

#6

I actually just converted it to a gif, and its now loading on slide load. Thanks for the help :slight_smile:

#7

Hey @logoglo,

We’re glad that you’re able to find an alternative option to your issue! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.