Streaming live at 10am (PST)

Help needed with parallax on hero


#1

Hello,
I have watched the various tutorial videos and read as many posts as I can find, but I just can’t wrap my mind around the parallax settings (it doesn’t help that I am dyslexic) What I am trying to do seems fairly simple. I want the large crystal to scroll downwards as the user starts to scroll down the page and have the smaller crystal scroll slightly up. For some reason, I cannot get this to work at all. Maybe it has something to do with offset? I don’t know, but I could really use some help.
Here is the designer link:
https://preview.webflow.com/preview/tascam?preview=51b30f6cb80755bdbb3a67943baba20d

Another issue is once I get this to work, how do I make it responsive? Right now nothing scales.

Also how come on the animation boundaries tooltip, the 100% is shown at the top and 0% is shown at the bottom when the timeline has the 0% at the top and 100% at the bottom? This is confusing(at least to me)

Thanks


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


#2

I’m having similar trouble, but I can say that I think you need to add a move transform to each of the elements that you want to animate in your timeline - you’ll have to fiddle with the settings to get what you want but I just tried it out on your preview site and I got the elements to start moving - albeit in the wrong direction.


#3

Thanks for looking and the reply. I am getting a bit frustrated with finding answers at this point. I watched the workshop video and as soon as @PixelGeek gets the two boxes to start to move, the one box moves back into place which is not what he wanted, but instead of solving it, @PixelGeek just says " huh…I guess I gotta figure that out" and then moves on. This really doesn’t help anyone at all.

Also sometimes posted questions in the forum are answered quickly and other times they are never answered. This is really frustrating to anyone working against a deadline. A solution to this would be to take a bit more time with the tutorial videos and try to cover not only the tool but maybe some use cases and edge case uses. And for the love of everything holy, the videos should cover how it works on different viewports!

I love Webflow and I love the videos and community help, I just wish there was some consistency to the interaction with the brand. Having all of these great features and tools which supposedly are to help noncoders really don’t offer much value if large amounts of time have to be spent trying figure out how to use them.


#4

Hi @kbowman
Did you watch this tutorial? https://university.webflow.com/lesson/parallax-movement-on-scroll-interactions
If you take a look under the video, you can also see the written toturial.


#5

@Sven_Erik_Slattedale- I did watch that but COMPLETELY MISSED the link to the source file! Thanks for the heads up! Looking at the file, I already have solved some of my issues I think! Thanks again for the info!


#6

Although none of the content seems to be adjusted for responsive design. :frowning:


#7

I think that’s because they expect you to use other images (or text) than they are, and maybe even different sizes. So you kind of have to make it responsive yourself… but in your case, this should not be too difficult. You have set your crystal to position absolute, top right corner… and then adjusted it from top and left side. The best you can do, is to click on breakpoints and then adjust top and left side. The adjustments you make will not affect breakpoints to the left of the one you are working on… if that makes sense.
You should also adjust with of your image… maybe use % instead of pixels?


#8

I agree…I find using % is a lot easier when adjusting for different viewports. Responsive is a slippery slope and there seems to be multiple solutions for any given situation, that is why I was hoping their example covered it so I could at least take a look at one solution and use it as a starting point. :slight_smile:


#9

Have you seen this course? https://university.webflow.com/article/intro-to-responsive-design
It helped me a lot


#10

Yeah- I love all of their courses! Unfortunately, I always seem to think of a design that goes beyond their examples… :wink: