BeckBeach

Is there a tutorial explaining how to create an image like the hamburger image into a mesh?

I saw this site on awwwards: https://loveiko.com/ It has 3D mesh objects that animate. Is this being done with Greensock? What program makes these 3D mesh objects? One of them looks like an emoticon that was made into mesh. Any help is appreciated.

Wow that's really cool. I never heard of PIXIJs.

Hi! I am trying to figure out how a warping animated background could be created using GSAP. This website here: https://titan.viita-watches.com/en/ has a marble background image that is moving. I looked at the source and the background is a jpg. I'm not sure how it is moving. The site uses GSAP TweenMax and Scroll Magic after looking at the javascript here: https://titan.viita-watches.com/en/dist/build.js Does anyone have any ideas? I would like to achieve the same effect on my own website.

Ok I did. Thanks. I hope my boss likes this. He may want them randomized too. *yanks hair out*

Hi! I made 3 instances of blip ( #blip1, #blip2, #blip3) in the shapes group. edit: I got all 3 to work but they play together. I am trying to make them play one after another. http://codepen.io/beckbeach/pen/gmBwpd

Great! That looks good. Another issue I have run into is that it won't let me animate another instance of #blip. Do I need to make a #blip2, #blip3, etc shape to animate this shape more than once? motionPath = MorphSVGPlugin.pathDataToBezier("#mp1", {align:"#blip"}), motionPath2 = MorphSVGPlugin.pathDataToBezier("#mp2", {align:"#blip"}), motionPath3 = MorphSVGPlugin.pathDataToBezier("#mp3", {align:"#blip"}); function getBlip() { var tl_blip = new TimelineMax({repeat:-1}); tl_blip .to("#blip", 1, {bezier:{values:motionPath, type:"cubic", autoRotate:true}}) .to("#blip", 3, {autoAlpha: 0},0) .to("#blip", 1, {bezier:{values:motionPath2, type:"cubic", autoRotate:true}}) .to("#blip", 3, {autoAlpha: 0},0) .to("#blip", 1, {bezier:{values:motionPath3, type:"cubic", autoRotate:true}}) .to("#blip", 3, {autoAlpha: 0},0); return tl_blip; }

Hi thanks! I got the "#blip" shape to move along the path, however, I need to have it move along the center of the line. http://codepen.io/beckbeach/pen/gmBwpd

Yes it does. I think it looks really good but now my boss says he just wants one dot to draw across. I will try to do this using your airplane line example. It will just be a single dot moving across each site with no line showing up. I appreciate your help!

Hi I am trying to do this but it keeps showing a dotted line that won't animate. I am just trying it on one line at the bottom. Can you let me know what I am doing wrong? http://codepen.io/beckbeach/pen/dvKYYJ What I am going to do with this animation is have the lines draw and then fade in 50%. Then, randomly, a dotted line will draw one at a time very fast. This animation will be ongoing until the user leaves the page. It is for my job at Verizon. We recently bought the business club greensock and I am the only developer on the team.

Thanks! Is it possible to animate each line one at a time randomly?

I am trying to animate a 2nd group of lines that will be dashed. They will animate one at a time continuously after the first animated timeline is completed. I'd like them to animate randomly if possible. The scene1 timeline seems to not play and I get errors. Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string. Here is my code: var mainTl = new TimelineMax({delay:0.5}); function getLines() { var tl_lines = new TimelineMax(); tl_lines .staggerFrom(".st0", 2, {stroke:"white",strokeWidth:2,drawSVG:"0%"},0) .from(".cls-3", 1, {scale:0,transformOrigin: 'center center',ease:Bounce.easeOut},0) .to(".st0", 1, {autoAlpha:0}); } function getDash() { var tl_dash = new TimelineMax(); tl_dash .to("#line26", 1, {autoAlpha:1}) .staggerFrom("#line26", 2, {stroke:"white",strokeWidth:2,drawSVG:"0%"},0); } function init() { mainTl .add(getLines(), 'scene-intro') .add(getDash(), 'scene1'); } init();

Thank you so much, Petr! I am a big fan of yours after watching your videos. They have helped me so much to understand Greensock and learn more about JavaScript. I fixed my graph to follow your guidelines and it looks so much better.

Hi! I am new to GreenSock animation so do not know very much. Can anyone recommend to me some other animations that might look good for my animated graph? So far, I incorporated the autoAlpha, scaling, animate.css. I am trying to draw the top line from the circle but it keeps scaling from the top instead of the bottom. Even putting a transformOrgin of '0% 0%' will not help. Any tips would help. I learned GreenSock from the ihatetomatoes Greensock paid course. I keep referring to the videos as well. Thanks!