Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Neg

Opening page with morph transition

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 @Cassie, thanks a lot for :

47 minutes ago, Cassie said:

pointer:events: none

It helped  a lot. I will definitely update my syntax. 

  • Like 2
Link to comment
Share on other sites

Hi agian @Cassie, In order to load java faster than html I  put my java text inside module <script type=''module">

and it really works :)

 

But not always.

Link to comment
Share on other sites

Hmm. I'm not sure exactly what you mean by that, but the browser support for modules via script tags isn't perfect yet.

I'd probably just do a little fade in if I were you. 

 

  • Like 3
Link to comment
Share on other sites

I will go for "fade in" as you suggested. Thanks for the link.

 

  • Like 1
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

Hi @Neg you have a syntax error in "line 86", 

try:
 

window.addEventListener("load", function(event) {
  init();
});

 

  • Like 6
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.
×