Trang

@OSUblake OK, thanks.

Hi @OSUblake, Thanks for getting back to me. Sorry if I wasn't clear in my explanation ... I didn't actually want someone to do this for me. Just hoping to get a tip, some advice on which way to go with this. I did think of animating 2 waves and flipping one but I thought there might be a more elegant solution. I always feel my solutions are very clumsy. But, no worries. I'll press on. Many thanks.

Hi, Dumb question ... I've been following the SVG Wave Animation forum (https://greensock.com/forums/topic/16172-svg-wave-animation/). I'm trying to create something like the first post (by peacepostman - thanks, man!) in this forum but I would like the SVG/wave animation: 1. to be vertical 2. to cover almost the full width of browser 3. to animate on both sides of the SVG (See screenshot-2.jpg - attached) I've managed to get the SVG to display vertically using CSS (transform: rotate(-90deg);) and the left edge now animates fine but: 1. the SVG now sits towards center of screen 2. the SVG doesn't stretch across full width of browser screen 2. I have no idea how to get the right side of SVG to animate (wave) along with left side. See Codepen: https://codepen.io/Ben10/pen/wvyaare (See screenshot-1.jpg - attached) I've messed around with various CSS settings but can't get a solution. Not even sure if this is possible. Wondering if someone can point me in right direction. Many thanks.

Hi, Thanks. Much appreciated. Works perfectly. I did attempt to set up a timeline but couldn't get it working - poor coding skills on my part. Once again, Thanks!

Hi, MAIN TWEEN I've used GSAP Scroll Trigger to trigger a SVG (.ufo) to tween across the screen, left to right, only after the user has scrolled to bottom of page. It seems to work fine: gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(MotionPathPlugin); gsap.set(".ufo", {x: -500}); gsap.to(".ufo", { scrollTrigger:".ufo", x:2000, duration:6, motionPath:{ path:"M-80,20 c300,50 600,30 2000,-180", autoRotate:true } }); LASER BEAM The 'ufo' fires a laser beam using a 'rays' layer in the SVG. The 'rays' layer should initially be invisible, but flash for an instant as the 'ufo' completes its tween. I've managed to do this with the following code: gsap.set("#rays", {opacity:0}); gsap.to("#rays", 0.1, {autoAlpha:1, repeat:1, delay:0.7, yoyo:true, ease: Linear.easeNone}, 0); PROBLEM My problem is: The ScrollTrigger works fine but doesn't fire the 'rays' layer. If I refresh the page while I am already at the bottom of page, the laser beam ('rays') works (flashes for an instant) but this doesn't work in conjunction with the ScrollTrigger. It seems to me I may have to call a 'rays' function from within the ScrollTrigger function but I can't work out how to do this (have checked docs. but still can't work it out). Also, I've tried to set up my CodePen to mirror the set up in my original HTML page but I'm not sure it works exactly the same way. Sorry. Hoping someone can point me to how to restructure my code to get ScrollTrigger and flash of laser beam ('#rays') to work together. Many thanks.

Hi, Just wondering about the availability of the Timeline Visualizers as used in video at: http://greensock.com/position-parameter This page includes a few of the visualizers but they are not-editable Is there any chance an editable timeline visualizer, like the one used in the video in the above page, could be made available? I find it a great learning tool to help me visualize timelines as I build them. Best regards, Trang