Jump to content
Search Community

Animate SVG using scrolltrigger and morph

phernand42 test
Moderator Tag

Recommended Posts

Hi Everyone

 

Trying to do some simple animations of a DNA SVG graphic using scrolltrigger and morph svg. As you can see in codepen example I got it to work somewhat but the morph looks a little weird when I scroll down to second section (haven't yet added in other parts of graphic).  Wondering if this is the right approach or if there is a better way to do this. Ideally when a user scrolls down small pieces of the graphic will appear (or ease in when scrolling). 

See the Pen eYZjaJO by phernand42 (@phernand42) on CodePen

Link to comment
Share on other sites

Hey phernand42 and welcome to the GreenSock forums.

 

MorphSVG is for morphing things from one state to another state. What you're trying to do is add pieces, so I don't know if MorphSVG is the perfect for the job. I might consider using DrawSVG instead to draw the new parts. You could use MorphSVG but I recommend transitioning a hidden part to create the new additions if you're going to do that. Ultimately it depends on how you want the animation to look :) 

Link to comment
Share on other sites

Hi Everyone, 

 

Sorry for all the questions but I could use a little more help. So I decided to go another path for this animation and keep it a little simple (Please see codepen below).

 

See the Pen vYGVyPp?editors=1111 by phernand42 (@phernand42) on CodePen

 

However the animation is out of order and partly not working. The starting image should be a non bolded DNA image instead a bold one. When you scroll down to second box/trigger it should then bold part of the image (which is currently the starting image). When you scroll to third box/trigger it another piece or image should display (this scrolltrigger is not working for some reason). Not sure why its out of order and partly not working but could use some help. 

 

Thanks!

 

Link to comment
Share on other sites

Hey @phernand42,

 

You can use autoAlpha.
You have set both elements in the CSS visibility: hidden.
So you can show them with autoAlpha: 1.

 

autoAlpha

Identical to opacity except that when the value hits 0 the visibility property will be set to hidden in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to inherit. It is not set to visible in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that’s probably not what was intended). And for convenience, if the element’s visibility is initially set to hidden and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your CSS visibility: hidden) and then fade them in whenever you want.


 

See the Pen poyQZqj by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

  • Like 3
Link to comment
Share on other sites

Yes! Thanks so @mikel!

 

Did not know about autoAlpha. My apologies though for not reading documentation more throughly. Will do better next time!

 

Do you know if this piece is still needed?

 

tl//.from('#pt2-path', {autoAlpha: 0})
  .add(animateDNA())
    .add(animateDNA2());

 

Thanks again for the help

 

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...