Sean_has_started_coding

Hey nistabeverlista, thanks for your comments. That's very kind of you. Hope you're enjoying the journey of learning GSAP as much as I am.

Hey thanks so much Geedix, I am definitely going to remain focused on GSAP and will widen my horizons beyond banners. Really not a great fan of Animate CC and GWD. And yes, animating SVGs is something I really enjoy. Thanks Cassie, will reach out to Joe. Have a great day/evening.

Hello all Thought I’d share my developments as I learn GSAP, coming from a print design background. I hope this kind of post is relevant to this forum. I’ve added a number of animations to my portfolio website - hegartyanimations.com - and looking to further develop my skills and polish my animations. This week I’ve reached out to a number of experienced developers and I’m grateful for all the feedback. I’ve had some positive comments but the feedback has confirmed my belief that I have some way to go yet to secure freelance work. I’ll work on cutting back on the number of GSAP animations and for the banners I really like, I will resize to different dimensions. Other advice has been to focus more on Animate CC and Google Web Designer. For the latter, it’s been recommended that I work on dynamic ads (Though I much prefer hand coding to using a timeline). I am acutely aware that I need to get some client work on the site and that’s my aim in the coming months. Finally, it has been remarked by several that the market for freelance html animated banner developers is on the decline. Some indicated that UI animators are much more in demand? I am considering increasing my knowledge of Webflow. My experience in FEWD has been limited to creating marketing websites using Bootstrap. It would be great to receive any comments on the above from experience GSAP banner developers. Thanks all for the continuing support from members this past few months. s

That's brilliant, thanks as ever Craig. That makes perfect sense. Will tweak the code tomorrow based on your comments. Have a great weekend.

Thanks for the reply Rodrigo, I have just found a solution to the issue. Have a great weekend.

Hello all I've been pulling my hair out trying to fix a masking issue. Any help would be appreciated. I have two masks in the animation, the first appears above the blue line, and the second appears under the blue line. The first one, revealing the education icons work fine. The second mask revealing the title text does not for some reason. The mask hides the text completely for some reason. The masks are set up the same way. Thought I had a good take on clipping masks, only to be stumped by this. Any guidance would be appreciated as ever. Thanks.

Brilliant, thanks both. This will help me clean up and timeline and ensure my issues is fixed. Have a great evening.

That's great, thanks for your reply; yes I do need to use functions more. I will have a look at cleaning the code tomorrow. Appreciate your time and advice.

Hello all Hope everyone is well. I have put together an animation with a number of elements repeat indefinitely. Because of this, the animation does not end. I am sure there's a simple fix for this, but I can't see how I can end the animation. At the end of all my other animations, the text in the button switches to 'Play' but in this animation, the text 'Pause' is visible indefinitely. (Please disregard the missing image for now) Any help as ever would be appreciated. Thank you.

That's brilliant, thanks for getting back to me so quickly on this. Works just how I wanted and will get now with the animation. Have a great weekend.

Hello all I am trying to ensure the masked text within the SVG is visible over the red circle (the div holding the circle is outside the SVG). I need the div to be outside the SVG as the circle is created from an elaborate animation where shapes are morphed into each other. The issue I am having is the masked text within the SVG is not visible on top of the circle. I have placed absolute positioning for both the SVG and the circle and ensured the Z-index is higher for the latter. I thought this would solve the issue but I had to luck. Any help for this would be fantastic. Not great urgency, I'm not looking into this until next week, but would be great if someone can offer assistance. Thanks so much.

Great stuff, thanks as ever Craig. Will work on this in the morning. Have a good evening and thanks again for your time.

Hey Craig, thanks for getting back to me so quickly. I am still having the same issue, with the mask behaving different in Safari when compared to Chrome (it works perfectly in the latter). The code looks clean to me but if you can point me towards the parts which can cause an issue, that would be greatly appreciate. Updated pen: https://codepen.io/HappyGooner/pen/ExdLMQb Thanks as ever.

Hello all, hope everyone is doing well. I am trying to create a mask of an image which when animated increases the size and changes the position of the mask. It works well in Chrome but not in Safari. I'm afraid it does not work in the code pen link above but it does work in Chrome (I hope it helps to illustrate my problem). In Safari, the mask is not behaving as it does in Chrome, with an exaggerated movement. I have a text box animating at the same time as the animated mask. The mask first reveals only the woman in the left but then it increases in size and position to include the other two people in the image. This is part of a longer animation and my client wants to create a number of animations in this manner, with different images and captions. I have tried adding a height and width to the clipPath holding the mask but not joy. Been playing about with this for a good few hours and have attempted to find a solution on google (as well as in the forum naturally...). But no success. Any advice would be greatly appreciated as ever. Thanks all.

You're a star, many thanks Craig. Makes perfect sense to animate a child group of the group that is clipped Really appreciate you taking the time to fix that.

Hello all I'm unable to get a clipping path to work correctly with a simple animation in Greenock. Being a little dim I guess but I can't see what I have done wrong. Masking an image is simple to me but not a clipping mask. Find attached a code pen with the ship animating into the circle. Circle has been placed within the Defs tag. Can someone please assist? Any help will be greatly appreciated. Thanks as ever.

That's great, thanks Cassie. This is a great starting point; this will serve my needs for now and I can build on this as create more intricate and complex animations. Thanks for much again for your prompt and clear solution. Much cleaner code.

Hi guys, sorry for coming to this late. Thanks for all the replies, I am hearing that all is good with the site now. Appreciate all your help.

hi Cassie, thanks for much for replying to my post. So far, I've just worked on 2D animation on my banners, using text and shapes. I wanted to look into incorporating video in the 2D animations. For now, the banners won't be interactive, just inserting some video will make the banners a little more engaging. I was not sure if this is an easy task within a GSAP timeline. If you can point me towards how I can learn how this can be achieved, that would be wonderful. Thanks again for your time. Sean

Hello all I am trying to insert an mp4 file into a timeline but the video is not playing smoothly in Chrome or Safari. I have nested timelines and looking to play the video in the second timeline. I'm pretty new to Greensock (and not totally comfortable with JavaScript, coming from a design background), so would really appreciate any feedback on why the video is not playing smoothly. I have set up a codepen. Have tried to troubleshoot the issue but not having any luck. Do shout out if you have any questions. Many thanks Sean

Hello all I need to ask a favour; I have created a website to host my Greensock banner animations - www.hegartyanimations.com Some people have indicated the animations do not play (I have a play button under each). The animations play fine for me. Can I ask anyone with a spare few minutes to see if they play okay for you? (Not sure if this is the appropriate forum for his request). Thanks Sean

Hello all Thanks for the replies so far. I still can't find a solution to what I am sure is a simple issue. Issue is I need to click the Play button twice to start the animation. It does work fine in code pen but when I open the animation in any browser, I need to click the button twice. When I open the Console, there is two instances of the message '[Five Server] connecting...' See the code below (which has been cleaned up from my previous code) https://codepen.io/HappyGooner/pen/yLqVLyq It would be great if someone can shed some light on this issue. Thank you.

Many thanks for the reply mvaneijgen. Still have the issue but it is odd that it's fine on my pen. Will investigate after the holidays and will view the console log to see if helps steer me towards a solution. Have a great xmas.....

Hello all My first posting here....!! I am new to GSAP - I come from a design background and I have enjoyed the challenge of learning code. My ultimate wish is to master GSAP to help with my hand code web banner animations. I am battling with an issue of needing to click twice on a button to start an animation. My wish is to post my animations on a portfolio site and enable to user to start and then restart my animation. I have googled this issue but I have not found an easy solution to apply to my simple code. The code works fine in my code pen but to doesn't work my working website. I'd really appreciate any guidance. Regards Sean