â–Ľ
Streaming live at 10am (PST)

A little help w/ transition timing

#1

Oh hello,
I was hoping someone might be able to give me some advice on transition timing. I have been following the awesome tutorial: Webflow Workshop #70: Creating a background scroll interaction in Webflow-but I am having a bit of trouble with some of the fade timings.

The three main issues I have are:

  1. I would like the background of section two to fade up before the textbox does. I like the speed that it currently fades up at, I just need it to happen BEFORE the textbox fades up

  2. I would like the headshot in Section 9 to scale down slightly as it fades up and then scale back up as it fades out. I have followed the tutorial video, but each time I apply the scale transition it breaks the whole thing. I don’t know what I am doing wrong here.

  3. I would like the background for section 11 to fade up as soon as the text from Section 10 goes off screen. Again, I have played with different settings here and I just can’t get it to work.

Any help with this would be greatly appreciated!

https://preview.webflow.com/preview/nurburg?preview=e000ad96f2eb099a56fc6f488a7f5085

Here is my public share link: LINK
(how to access public share link)

#2

Kbowman the scroll interaction definitely can be a finicky thing to play with. I noticed you aren’t using the wait property. The easy fix for your 1. would be to have the textbox have a wait of 1000ms or so and that would take care of your issue.

Depending on how much of a perfectionist you are. You could drive yourself nuts with timing. I use the background interaction a fair amount so I understand what a beast it can be.

If I remember correctly in order to scale a background it would have to be in a div. You can’t put a scale interaction just a backgrouynd element. You will be placing it on the div inside the background element. To make sure it takes up the original bg set the position absolute and full.

Hope these are a quick easy fix for you

Jeremy

#3

Hey Jermey,
Thanks for your reply! Yeah, the scroll interaction is crazy frustrating. :slight_smile: I’ll have to try the wait property for #1 and I forgot about the scale of the background image trick. I will have to rewatch that part of the video again. Thanks for the heads up.

I have noticed small weird things happen fairly frequently, like certain images fade up at the wrong times but if I refresh and try it again it fixes itself. I don’t know if this is just an issue in the “designer mode” and will not happen once it is live or not, but it’s kinda frustrating!

Again thanks for the feedback!
Best,
Keith

#4

Kbowman,

the other thing to remember with scroll interaction or load interaction is
that they also depend on the speed of device being used. But yeah the
designer is trying to do a lot of things at once I always check the
live output. Even if you don’t want it to go live. Publish to the
webflow io to test

always
Jer

#5

I just tried following the video…and of course I seemed to have broken the whole section 9 now. :frowning:

#6

Well remember you are not really doing anything to Section 9 , just the bg
section of 9. I gotto run but if you are still struggling tomorrow with
it. I can try to help.

always
Jer

#7

Thanks! Yeah I got the image to show up and in scales but in a really awkward way and when the section scrolls out it just fades with no scale. So I am going to move onto another section of the site to work on. If you could give me any advice tomorrow that would be awesome!

Best,
Keith

#8

Here you go Keith,

It is a cool effect. You just need to play around with the timing of your interactions more. I took the css transition off and made it an initial appearance interaction and then applied the transition on it.

That should help

always
Jer

#9

Jeremy,
I can’t thank you enough for taking the time to do that video. I watched it twice now and I am going to try and implement it now. Fingers crossed!

Seriously, thank you!

UPDATE: I followed your example and it seems to be working great! There are a few “glitches” from time to time with the background “flashing” different background colors or the image fading up and out during the wrong sections, but I can’t replicate those issues consistently, so I am hoping it is simply an “in designer mode” glitch and address it later on.

Again- I am super grateful for the help!

#10

Quick question about timing/offset. Any idea how they get this to work so slick? As soon as the main type goes out of view the background changes and then the text of the next “section” fades up. It’s timed so well. I need my sections to work this way. https://www.helloheco.com/project/avenir

Any suggestions would be great. Also, I am not sure I understand how the % work for offset…

Best,
Keith

closed #11

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