How do you create an animation interaction like this..?

Can anyone explain how can I create an animation interaction like the one found on chase.com. (https://www.chase.com/)

When I scroll down the logo closes up, you will see the word “chase” and the chase “icon” move into each other and masks the word “chase” within the icon and then places the logo icon into the center. Any thoughts?? Thanks in advance!

Hi @William_Rodriguez

  1. You will be not able to create EXACTLY same animation, because there is involved “active scroll” (animation progress depends on how much % of page scrolled)

  2. By using interaction with scroll trigger you can have pretty similar animation.

  3. I would put word “CHASE” and logo image inside the wrapper div and centered it inside the navbar. Both elements inside the wrapper is cantered too

  4. During the interaction header with word “CHASE” can change its width from “auto” to “0” and change its opacity from 100% to 0%

  5. Logo will go to center by itself, without any interaction

Regards,
Anna

1 Like

Hi Sabanna,

Thanks your message! I am really not an expert in CSS, and I am a newbie to Webflow. Is it possible to, please, give me quick run down on what I need to do in Webflow to achieve this interaction? I mean, I know and understand how to play around with the interactions, but I am still not there yet. Thanks in advance!

Hi @William_Rodriguez

You will have to use interaction with scroll trigger (Reveal elements on scroll - Webflow University Documentation)

I would add the div on the top of all site and set interaction on that div:

  • when div goes out of view >>> logo “shrinks”
  • when div goes into view >>> logo back to its width

As I mentioned earlier:

navbar - text-align: center;
wrapper = div with width: auto, display: inline-block, text align: center;
logo-word and logo-image: both display: inline-block

Try to play with it :smiley: If you will have more questions we will try to figure it out

Regards,
Anna

1 Like

Argh!!..I tried but I didn’t come even close. You can see here: https://preview.webflow.com/preview/logo-test-191f6c?preview=c2b6cbe6f81095035e1d426c39cde19d

Well, lets say you walk half way :wink:

  1. It will be enough to make only nav widget itself position: fixed

  2. Clean structure of nav (I deleted one container and moved wrapper). In result it should be like this:

  3. In your case interaction can be applied to “blue” section.
    So when section scrolls OUT of view on 50% >>> logo-text will shrink and disappear.

For create this, click on section and create new interaction. (that one that you made you can delete).

Trigger=Scroll

Done.
Here is video of result that you will have https://drive.google.com/file/d/0B-7cg8BSq1Z_YW1vY25TOEdxWUU/view

Cheers,
Anna

1 Like

Thank you so much!!

I made the changes and it worked, but one thing doesn’t appear right. The text for the logo keeps stacking on top of each other when the scroll is triggered.

Also, another thing is when I view the page in mobile view, I no longer see the hamburger icon, it’s gone.

https://preview.webflow.com/preview/logo-test-191f6c?preview=c2b6cbe6f81095035e1d426c39cde19d

Hi @William_Rodriguez,
give “logo text” some height in pixels, not “auto” . It should fix your problem :wink:

Cheers,
Anna

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