curtiswiens

Thanks all!

onComplete is triggering from the first run. I could time it with delays too. I dont want the rollOver to work until the timeline runs 3 times.

Sorry, yeah I made that method name up wishing it existed

Sorry if this is obvious. I feel like I have done it before cannot find a way to do it after searching forums and docs. I have a timeline repeating 2 times and I want to call a onRepeatComplete. Should I just var+=1 if var = 3? Thanks!

That is awesome and I am not surprised. You guys are so proactive and solution oriented. Greensock for life.

Wondering if anyone knows of a course out there that covers responsive design for GSAP. After years of using pixel values for ad work I am being asked to start creating animations on responsive sites. I get the basic idea but wondering if anyone has seen this covered in a online course anywhere. I just started going through this lynda.com course https://www.linkedin.com/learning/responsive-layout/go-cross-platform-with-responsive-design?autoplay=true&u=2060004. Thanks!

Awesomeness!

Thanks guys! this is a rush project but I am going to be up late so will get min demo going.

I am getting the value of a div x y position thusly: let c1x = document.querySelector('#c1').getBoundingClientRect().left let c1y = document.querySelector('#c1').getBoundingClientRect().top gsap.from(allcs,{duration:2.8,scale:0, stagger:{each: 0.1,x: c1x,y: c1y},ease:"quint.out"}) Is there a way to tween from a stage position rather than the object position? I thought that use to be "" vs no quotes. Basically I am trying to have them all tween from a common x y position. Thanks!

I was wondering about that very thing

I am putting together a quick how to for my company and was going to point to the transformPerspective examples on that page but it is fine they can just play with the numbers and see how it works. Thanks!

Not sure if there is an updated page for this, thought I would point it out. For me none of the examples work on any browser.

I just noticed that Flip, MotionPath and scrolltrigger were added to the GDN hosted libraries. As well as threejs. https://support.google.com/richmedia/answer/6307288?hl=en#zippy=%2Call-greensock-libraries

I have a few different tricks. Usually the bulk of the time for me is spent getting all the assets exported. In Photoshop I use file/generate/image assets. From AI it is a bit more challenging. I organize the AI files layers, creating seperate layers for the things that move, and then name the layers and use a script to export all layers using the layer name as the file name. jsx file is called MultiExporter. I use the CSS panel in Illustrator to position things, this is also a huge timesaver. I use variables in the CSS too to define background sizes etc... So I only have to put the numbers in once.

I noticed that Google includes it in hosted libraries has anyone used it in a GDN banner? https://s0.2mdn.net/ads/studio/cached_libs/draggable_3.9.1_min.js

Thanks! And thanks for verifying it is not simple.

Not sure what I am doing wrong here except for I took too much time off from using GSAP I am trying to do something really so simple here. Basically just want the headline and subhead to reveal from the center with the lines. No matter how I set thing up the parent div wants to animate from left to right. Am I just doing this the wrong way, not seeing something obvious or should I be using clip-paths? Thanks in advance!

I was heading in the right direction but your examples clarified so much. Again appreciate the help!

That is awesome. Thanks so much.

@PointC Just need to work out the math now. Any tips? I just threw some numbers in there for now. https://codepen.io/cwiens/pen/ExWXwOy?editors=1111

No worries thanks for the response, I had to jump on some other projects, back on this today. Yes, essentially what I want to do is have the gradient loop around the outside. So should I be tweening x1 x2... attributes to make this happen? I want the gradient to just appear to be looping around the rectangle.

I have it kind of working here: https://codepen.io/cwiens/pen/VwpbGNK?editors=1111

Been hot minute since I worked with SVG gradients. What I want to do here is basically move the gradient around the rectangle without changing the x1 y1 x2 y2 values. Should I be using a plugin here or can I do this by just tweening the attributes of the svg? Thanks!

I recently used Screenshot on my mac to record a few html5 videos and it worked a lot better than I expected.

yes, that totally makes sense. thanks! it is a little weird working on Adobe Animate. Thank you!