Streaming live at 10am (PST)

Finish Interaction on Link before Jump


I’m trying to create a landing page interaction.
I created this simple hover interaction, where the two flex div blocks inside a section expand and contract depending on where the cursor is.
Clicking the Brand section (left), will simply end the interaction and fade out / hide the section - so that you can browse the main site (currently blank).

Here is my issue:
After clicking the Photo section (right), I’d like the animation/interaction to complete before it jumps to the linked page.
Right now it is sharp and a bit janky, cutting off the interaction before it completes.

Is there are way to delay the jump to the linked page?
Or force the interation to complete before it links out?

Thanks in advance!!!

Here is my site Read-Only:
(how to share your site Read-Only link)

Are you still working on it? I’m in here now looking. I have a few ideas that work for me?

Hi Gary! Sorry to miss your reply until now. Yes I’m still trying to make it work! Would love any help you can offer!

Hey there, no biggie. So man, I have to say, this is REALLY NICE layout. I love it! Great job so far.

As I looked through it, there are a few caveats I see.

  1. Work is another page, to stop the flash you’ll need to add code snippet for the browser. This is an issue with others online as well.

  2. Why can’t you have a “One Page - 100vh” landing that slides to cover each other?

  3. I think the slide from Brand is superb. Seems apparent to do this on both sides. I believe you will have a nice user experience.

  4. Make each section have a hover highlight to show a user is on that section. Each background increase brightness behind image (Great image cutout btw). After hovering, make the entire section a link block, which when clicked, will slide to cover 90% or 100% over the other. Then give all details for that section. On section, you can add info and button to go view a full page.

  5. Now decide is this going to be the primary landing for navigation (which a breadcrumb or back link is needed). Or will they simply click to receive a full scrolling site with full link nav up top?

This is just a suggestion. If you still want the current configuration, I’m almost certain that flash will always be present unless you add code snippet like this:

background-color: black;

-webkit-animation: fadein 1.5s; //I use chrome
background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) ), url(‘wall_pattern.jpg’);
color: white;

I couldn’t test it out, because it’s read-only, some said it was successful. However, I think the “One Page” slide would be SO cool!

What’ya think about this?

Hi Gary, wow that is so kind of you to go into this much detail and offer such great suggestions. I love the one page slide concept. And yes, thanks so much fo the flash page code snippet to - that will make it much smoother! I’ll get to work on implimenting and testing and update you! Thanks!

Awesome! Keep me posted, I would love to see your project updated… man it’s really good. Take Care.

1 Like