Hello, i bought a template but i can’t really modify the home page like i want beceause when i remove some unwanted sections or elements it’s just destroy the home animation
Video of the problem
( 1 when i remove some sections, 2 when i do not touch anything )
the images are not linked with the sections, but I noticed that when I add more sections (with large images for example) the animation starts to work normally again, I guess the problem could come from the size and the number of sections needed to make the animation work properly ?
Someone know how i can avoid that ?
this is my read only link :
thank you in advance.
Welcome to the community, @maxvnck!
I’m not able to view the video you included as I don’t use Facebook anymore, so is there any other way you can provide that for reference?
I took a quick peek at the project and its interactions—to see if I could figure out a situation where modifying the length of the page would have a negative affect on the animation—and the main thing I found is that you have two “While page is scrolling” interactions:
Because these interactions take place over the course of the height of a page, removing sections (and changing the page height) will cause it to behave differently. There are a couple of solutions here, the first of which just involves modifying the point within the page that certain animations are triggered and/or how far they travel when triggered:
In the screenshot above, the end point of those elements movement will happen when the page is 81% of the way scrolled down (and moving the items thousands of pixels either up or down), so if the page is only a bit taller than the viewport then our animation will trigger almost immediately. Maybe for longer pages you can tweak the endpoint of the movement trigger, and on shorter pages you can change the movement value so the items shift more gradually. In fact, you can even use % or VH units to make sure these elements move only as much as they need to before leaving the screen.
The second option is moving this animation off of the page, and instead having it happen on the Hero section as a “While scrolling in view” element trigger:
This means that your animation duration will be reflected based on the section that the elements are animating within—rather than the page as a whole—so timing can be much more predictable regardless of page length. The idea is roughly the same as the “While page is scrolling” interaction, and you can even use the “Animation Boundaries” to tweak when the 0 and 100% trigger points land in relation to it’s position:
That’s just taking a guess from your explanation, so if that sounds like your issue then one of those two methods (hopefully) should give you the solution you’re looking for. If I totally misunderstood the issue, any extra information—either with an updated video link or a bit more info on the issue and how to reproduce it on my end—would definitely me in getting you a better answer
Thank’s you really much, your first solution solve my problem.
Thanks again for your quick response, really appreciate your support have a nice day
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.