Streaming live at 10am (PST)

Glitchy animation, Move Up Transform and Section Height Resize


#1

Hi all, @Will (dunno which one?)

I am using Chrome 48.0.2564.116 m on Windows 10 on an HP Spectre x360. I've set up an animation​, carefully entering wait times, transforms, etc. and only half of it is working. According to my careful checks and multiple attempts my programming of Webflow is as it should be, but I get a different response from each half of the animation. I have also noticed I can get different behavior each time I run the same animation in Preview, indicating something could be awry with Webflow's system?​ E.g. run the same animation half a dozen times, and watch the 'N' in MIND.

https://preview.webflow.com/preview/mindfirstfoundation?preview=c3f9e2880fd72f649e762247c5a54fc9

All letters should be moving to the top of the Hero Section, while only the first four do. All were programmed to move up 210px at the same time, but the 'FIRST' ones did not. I then doubled their transform to 420px to see what would happen, and now they are moving up slightly only. Strange. All are in the same container, and each of their div blocks has the same class.

I am also trying to get the Hero Section to reduce in height smoothly, not snap to a new height. I have set ease time to 1000 ms but it is still snapping. Also in the Preview button from within the animation panel it shows 30 px height, but in then in the browser it sets to a greater height.

After watching hours of tutorials, and reading hours of the forums, I am generally finding large gaps in Webflow's support materials, such that not all of the Designer features appear to be explained. I don't mean every little detail (I am very computer literate and have used Inkscape etc.) but even a general explanation of what each setting/function achieves.

Thanks in advance for your help!


#2

Hi, I would recommend checking the site in an actual browser and not the webflow preview mode. Sometimes things get weird in preview and they are fine in the browser. I continuously check my sites on chrome and safari as I'm working.

If you look at the interactions for both the letters, you have a move to origin step on the Mind interaction and not on the first.

You also have padding of 137 on the hero, I'd suggest just setting a height instead of using padding since your interaction changes the height. You'll also have to compensate on the height in the interaction. Also, get rid of the empty H1 in the middle, you should use padding for that.
You also have a subclass "D" on the letter D in Mind which has a float right but that doesn't seem to fix the issue. I have a feeling it has to do with some styles on those letters. It is really messy and I'm not really sure where to start troubleshooting honestly. I would switch all the letters over to simple text blocks without any parent divs like they have now, apply the load interaction to them directly and see if that helps. I'd also switch all the letters over to relative positioning to get them to where they need to be instead of using margins/padding.

This is just a general tip, I would also recommend not using multiple H1 paragraphs as it will hurt your SEO, using H2 or a text block would be better.


#3

Sorry, I'm not the Will you want to consult on this matter. I'm not a pro, and I don't use animations.


#4

Hey @trytryagain I just took a peek at your site and noticed that the Load Animations don't have the "Wait for assets to Load" box checked, make sure to have that checked on timed load animations as well as follow @DFink 's tips above :smile: :

Please let me know if this helps :slightly_smiling:


#5

@DFink, thanks so much for the in-depth response!

The problem persists in the browser as well...

Move to Origin is on the MIND but not the FIRST since: the first word appears centered initially, then moves out of the way for the second word to appear.

Removing the section padding, which I had carelessly left over from a previous iteration of the animation, fixed the issue with the section not going to 30px - now it does, whew. Thanks.

I deleted the empty H1, and used padding instead. I also removed the margins - those were also leftover from a previous attempt. Thanks again.

I reconstructed the intro using Text Blocks, and all of the same problems persist, plus new ones including spacing issues between the letters. However changing to H2 works great. Thank you for the pointer on SEO!

I re-created the interaction for FIRST, and it made no difference - the letters still do not Move Up the number of px they are supposed to.

Then, I decided to apply the same interaction as on the D of MIND, to the F of FIRST. Oddly, that corrects the issue and the F then moves up to where it is supposed to. Meaning that as you pointed out, if the block is subjected to the initial Scale, Opacity, and Move to Origin elements

it executes the remainder of the instructions differently than those blocks which only undergo only the second half of the elements

... which is entirely illogical? For example, while I indicate a -191px Move for MIND to get it to where I want it, I have to indicate a -955px Move to get FIRST to the same height on the page.

I still submit: is there is a bug somewhere in the system?


#6

Thanks @Waldo, I checked 'Wait for Assets to Load' on all timed animations, this should help avoid issues as I pile on the content.


#7

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