Jump to content
Search Community

Opening page with morph transition

Neg test
Moderator Tag

Recommended Posts

Hi everybody, 

 

This is an example of what I intend to make (not exactly but almost). There are two problems here: First, the text flashes on before svg  loads and this is not good and second, the buttons become disabled. I spent hours to solve this but I got stuck. Could you please help me?

 

Thanks

 

 

See the Pen LYyMppO by webplot (@webplot) on CodePen

Link to comment
Share on other sites

Heya @Neg!

If you want to be able to click 'through' the SVG - you'll need to set pointer:events: none on the SVG in your CSS


I assume the flash is because you're updating the SVG dynamically and the HTML/CSS loads before the JS does. You can probably fix that by hiding the content with CSS and fading it in or setting a background color on the SVG in the CSS.


You're also using a combo of old timelineMax syntax and new GSAP3 syntax - you may want to have a little look at that. 
 

 

  • Like 6
Link to comment
Share on other sites

 

Hi again,

 

I tried to use autoAlpha here, but I've faced with errors. There are two timelines in js file, one for svg and the other for loading " .content" after loading the page but in my local host after loading svg the content cannot be loaded! (have no clue why?) and in codepen svg and conttent both cannot be loaded. Can any body help me ?

 

Thank you

 

See the Pen LYyMppO by webplot (@webplot) on CodePen

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...