why doesn't this work in CodePen but does on Laptop

[mikeb]

Hiya

 

This is my first attempt at GSAP animation and wanted to ask if there is a better way to get this simple animation to display on different devices : 

On a laptop it is fine but on mobile devices the animation elements are not in line and basically all over the shop. 

Even on laptop I had a really hard time to get things to resize and line up especially the growing flower. 

 

However when adding to CodePen all I get is error messages saying GSAP is not defined ? 

 

Thanks for any pointers in sorting this out and pointing me in the right direction re: the coding as I'm sure I've made a pigs ear out of it ; ) 

 

Cheeers

Mikeb

See the Pen bGgONoM by MikeJB (@MikeJB) on CodePen

[GreenSock]

Welcome to the forums, @mikeb!

 

It wasn't working in CodePen because you forgot to load GSAP Here's a fork:

See the Pen VwPqaRE?editors=0010 by GreenSock (@GreenSock) on CodePen

 

The problem seems to be with your positioning of things. You've got a lot of hard-coded values in the CSS, like top and left which aren't very responsive. I think you'd be much better off if you just did everything in one SVG and then you can make that SVG element fit the width of the screen or whatever. That way, everything scales together and the coordinates remain consistent. 

 

Happy tweening!

[mikeb]

Hi and thanks for the response!

 

"I think you'd be much better off if you just did everything in one SVG"

If I have the flower as one SVG as you suggest then how can I animate the individual elements like the stem growing out of the flower pot and then leafs appearing etc ? 

 

For positioning of all the elements are you then suggesting to have this in the GSAP script ?   

 

Thanks in advance : ) 

Mike

[mikeb]

Hi Again

 

How do I position the multiple SVG elements? 

For example a flower in a pot has 5 SVG elements: The pot, The stem, Two leafs and the flower. 

Is it best to position these with CSS or the GSAP JS to animate on screen?  

 

I can't figure it out

 

See the Pen VwPqaRE by GreenSock (@GreenSock) on CodePen

 

 

thanks

[OSUblake]

Don't use images. Put everything into a single SVG. SVG is markup, just like HTML.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg

 

[mikeb]

Hi OSUblake

 

Thanks for the reply. 

Ok so am I right in assuming I would then add an ID to the 'flower' group and likewise ID's to the other Ellipse and Path elements so that I can then animate with GSAP ? 

And initial opacity of an element could be in CSS targeting said ID's ? 

 

Cheers

Mike 

 

 

[mikeb]

Hiya

 

I've amended the animation with everything in an SVG and given each element an id which I'm then targeting in the CSS and JS - however I can't work out why the left leaf won'y line up ?  as when I view the SVG in any browser then all is good.   All I want at the moment is to fade in  each element one after the other.  I'll try and add the bee and other stuff later ; ) 

See the Pen yLgryjv by MikeJB (@MikeJB) on CodePen

 

Thanks

 

 

[PointC]

The secret to SVG animation is asset prep. The biggest tip I can offer you is use a background rectangle the same size as your whole SVG when you export. I have an entire article about it here:

https://www.motiontricks.com/use-background-rectangle-with-svg-exports/

 

I'd also encourage you to learn more about SVGs by following the link @OSUblake provided and any other SVG resources out there. There are numerous videos, articles and demos from which you can learn a lot. Also take a look at GSAP timelines rather than using a collection of loose tweens with delays. I think it'll be easier for you to manage that way.

https://greensock.com/docs/v3/GSAP/Timeline

 

I've made a couple modifications to your SVG and set up a basic timeline so you can see how it all works.

See the Pen dc16bb451988aaa7ca7bff80433d55fa by PointC (@PointC) on CodePen

 

In this case we could make it even simpler since each of the elements is only tweening opacity but I left them as individual tweens on the timeline so you can see how easy it is to reorder them.

 

Hopefully that helps. Good luck on your GSAP and SVG learning journey.

 

[mikeb]

Wow thanks for the info @PointC

Appreciate both yours and previously from @OSUblake

I will go and read through that again and the links you sent before moving on with the animation. 

This is the first time I have used SVG and GSAP hence the muddled implementation : / 

 

Thanks again both of you 

 

Mike

 

 

 

 

 

 

[PointC]

Happy to help. It's a lot to wrap your head around when you're learning SVG and GSAP at the same time. 

 

Let us know if you have any more GSAP related questions. Happy tweening.