Animate SVG using scrolltrigger and morph

[phernand42 1 Likes (Newbie)]

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

[ZachSaucier 7,127 Likes (Superhero)]

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  

[phernand42 1 Likes (Newbie)]

Ahh thanks so much @ZachSaucier! That maybe a better solution. Will give that a shot.

[phernand42 1 Likes (Newbie)]

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!

 

[mikel 4,774 Likes (Superhero)]

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

[phernand42 1 Likes (Newbie)]

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

 

[ZachSaucier 7,127 Likes (Superhero)]

3 minutes ago, phernand42 said:

Do you know if this piece is still needed?

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

Which part of it?

[phernand42 1 Likes (Newbie)]

The commented out portion. Im assuming no. 

 

 

[ZachSaucier 7,127 Likes (Superhero)]

13 minutes ago, phernand42 said:

The commented out portion. Im assuming no. 

Correct, it's not needed