Start animation when section in view

Design help Animations & Interactions
1

Hello!

I’m updating my landing page, and I’d like to call attention to the sign-up form when the user hits ‘Join’ in the floating header. I’ve done so by creating a ‘bounce’ animation for the form.

The interaction goes:

  1. User hits ‘Join’ button
  2. Page scrolls up to top section (with form)
  3. Form bounces

I don’t know how to time #3 so that it occurs only when the section is in view. The timing will vary depending on how deep on the page the user was previously.

Could someone please take a look and advise?

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

2

Your idea will work better with popup/modal (Because its weird to scroll up/down for simple form).

For now its hard to answer because you don’t have any animation related to this. Anyway no way to create if trigger. Try to set small delay (Like this the order will be “scroll” than “bounce”).

3

Fair point, thank you!