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

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 ; ) https://codepen.io/MikeJB/pen/yLgryjv Thanks

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

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 https://codepen.io/GreenSock/pen/VwPqaRE thanks

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

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