Page Load animation does not trigger on any viewport

Design help Animations & Interactions
1

Hey Everybody, I’m working on the website right now and faced an issue. I created Page load animation for every page HERO Section separately and with one page that is a TEMPLATE created with CMS - I have an issue: so when trigger is applied to all viewports - on tablet and down content just dont show up. But when I preview from desktop on smaller viewports and published desktop all works - the content and the animation, but when I turn off trigger on Tablet and mobile content appears on smaller viewports on published versions just without animation - maybe anybody might know a solution to that because I need that animation on all breakpoints.

You can find that by using link below - please navigate to all pages and select Page called - Resources template - there is only one Page Load animation - that shows how text and a few shapes appear on page when it is loaded and on published website it is not only not working on tablet and down - the content just disappears - it is just empty. But when I don’t apply animation to Tablet and down - content is back but without animation.

img_4638_720
img_4638_720332×720 27.4 KB

https://staffappmd-com.webflow.io/resources/employee-handbook-template-for-medical-practices
Thank you!

Here is my read only - you need to go to pages and when you see CMS pages called Resources template - thats where it happens with hero section
https://preview.webflow.com/preview/staffappmd-com?utm_medium=preview_link&utm_source=dashboard&utm_content=staffappmd-com&preview=b58e8aa599408081a3f57adfabbcb27d&workflow=preview

2

hi @Alina_Ozerets your explanation is a bit generic, as no one knows your aim (what animation it is and what it should do) please be more specific about the issue to help others be able to look straight into the section and/or animation without pulling out the crystal ball. :wink: What animation? Where (page - section)? On a live site? if yes, provide a link too. If you have missed recommended forum guides that are pinned on top of each section here they are.

When posting please:

  • Required: Share your project’s Read-Only link AND live site’s Published link
  • The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is important to share this link, as custom code does not run in the Designer.
  • Upload as many screenshots/screencast videos as possible to help others help you faster
  • Add a description and/or post a link to a working example of what you’re trying to achieve
  • Reply to users by tagging using the @ sign followed by their forum username like this: @Alina_Ozerets
1 Like
3

Thank you for your feedback, I edited the post, could you please help with a solution by any chance?
Thank you!

4

hi @Alina_Ozerets it is hard to find why animation does not trigger. The only difference I have found is how animation is triggered.

All of your header on page load animation works on other pages as they are set when the page starts loading and your header animation on resources is set When the page finishes loading.

In theory, it should work but… Try to set the animation to when the page starts loading as you have on other pages to see if the animation starts triggering.

Another issue (minor) that throws an error is in your button request demo. The arrow SVG rectangle has height and width set to auto that is not valid value these values should be in your case100%.

1 Like