[Can GSAP + ScrollTrigger scrub a video on scroll?]

I used the other library.  Not gsap

[Horizontal Scroll inside a responsive container]

So just:

const infoWrapper = document.querySelector(".infoWrapper");

and

return infoWrapper.clientWidth - infoWidth;

That was my mistake?  I tried clientWidth. I guess I need to read up a bit more about how the math works.

[Horizontal Scroll inside a responsive container]

Well, I'm battling with this one.  I'm trying to get my project over the finish line by creating a horizontal scroll that works inside a responsive container.  The codePen is there for review.  I've watched Carl's Horizontal Scroll Series and have probably been looking at this too long.  

When I get near the end of the scroll, my animations don't play.  Most of Carl's math is for the whole window, not sure where to take it from here.  

 

Thanks

See the Pen 33972a01bee2a9f67cd007bb4b7155ff?editors=1010 by zenogy (@zenogy) on CodePen

[Tool to create a moving svg so I can code it?]

Thanks ya'll.  I'll take a look at puppet warp.  

[Tool to create a moving svg so I can code it?]

I have to be honest, this isn’t what I was hoping for.  I don’t have the orig artwork (layered) so the points are complete now.  Your solution is fine if we have the layers file, and if not I have to re-draw it.  
 

I appreciate the response though.  Maybe someone out there has the magic answer we’ve been looking for.

[Tool to create a moving svg so I can code it?]

Good morning GSAP Family!  I'm going to really need to explain what I'm looking for to see if anyone knows  of anything.  

 

I've really started to do more svg animations, and would love to know if there is a way for me to take say an SVG, that has a person who is "running" ( for example )  and move their legs, hands head etc, into a different position, get that path data, move it again, get THAT path data...etc....so I can create the animation using GSAP?

 

I understand how to use morphSVG, but getting the different states of a polygon from one state to another is a mystery to me, other than hand drawing, which to be honest is not going to happen.

I have access to all of the Adobe suite software if that helps. I've looked into "animate" ( the old flash program) and there are some cool tools that allow me to create tweens of the states I'm looking for, but no way as far as I can tell to get the path data from those tweens so I can animate them.  I'm probably missing some pro trick here, so any advice or direction is much appreciated.

 

Thanks in advance,

Jason

[Can GSAP + ScrollTrigger scrub a video on scroll?]

Thanks Cassie.  I've implemented it just now, and for the most part it is really easy to do.  I just love GSAP so, I was hoping there was something I was missing. Thanks for the link as well.

[Can GSAP + ScrollTrigger scrub a video on scroll?]

Hello GSAP family, my colleagues are pointing me to  https://scrollyvideo.js.org/ as the effect they want, and I wanted to know if this was something GSAP can do as well so I don't have to add this code for no reason.  

I want to : 

1. use scrollTrigger to play the video

2. use it to scrub through the video as you move down the page.

3. Would it be better that the video is a video tag? or should I use the video as a background? ( I'm just starting this process, so I have no idea.

 

Thanks in advance. 

[Scatter Plot and GSAP - Should I use GSAP or D3?]

This was fun to play with. Thank you. I think I got my answer.  i thought the animations here were fast enough, and there won't be much that is more complicated than this.  I appreciate it.

[Scatter Plot and GSAP - Should I use GSAP or D3?]

Hi gang, I'm just probing if GSAP is a direction I can go? or if I should focus on D3 to do a scatter plot svg?

Thanks in advance

[is there an infinite scroll option]

this site just repeats the scroll.  is this possible with scrollTrigger? is it something else?

https://wonderland.studio/

 

the scroll bar just repeats and repeats...not sure how they are doing that.

 

[cannot get dotted path to play]

This was ripped from here:

See the Pen wmmmmK by PointC (@PointC) on CodePen

See the Pen YzOwrbM?editors=1010 by zenogy (@zenogy) on CodePen

[Flip Cards don't fully reverse]

These are great! Thank you so much. Yeah, I knew I had redundancy and needed to clean things up, but couldn't see it anymore.   I really appreciate it. This forum is so fantastic.  I can't thank this community enough.

 

I had no idea I could control the timelines like that.

[Flip Cards don't fully reverse]

Hi everyone, 

I've lifted the flip card animations from this forum, and when I click on the cards individually, I get the response I'm looking for.  When I hit the "flip all button" the cards don't return to their original positions.  There's redundant code in here, so go easy on me, but I've been staring at this too long, and need a second set of eyes, if you please!  Thank you so much in advance, I'm sure it's small.

See the Pen 26cc7dc6184081cadc9dd336dfe2ab34 by zenogy (@zenogy) on CodePen

[Looping through svg elements]

Oh Cassie, thank you so much. There's  a lot to unpack here for me.  This gets me almost there, but I should be able to take it form here. There are so many different ways to skin a cat.  I love how you did this. It's so clean.  I'll post my final when I get it done. Thank you again for taking the time to show how these different options are available. I'm sure I'll have some follow up questions as to "why" certain choices were made.

[Looping through svg elements]

Well, the box would change color, the text would fade out.  Essentially that is all I'd want it todo. In my actual project it would also send some attribute data to another area of the application.

 

[Looping through svg elements]

Ok, I ditched the first pen and replaced it.  Sorry for that. I used some of your code for the update

 

Update:

What I'm looking for is how do I make it so that when you click on the red box, it runs its own animation, but at the same time, alters the circle.  If I click on any other button, the circle reverses, THEN runs the box animation, then re-runs the circle.  Any button not clicked has to go back to its original state. I think I've been working this too long.

[Looping through svg elements]

Hi Cassie, I think this is going to get me there.  I really appreciate it.  I'm going to put a more generic demo out as soon as I get it working so that people can fork it.  I'm just a bit panicked right now, so I just threw up what I was "actually" working on.  Sigh...  I see what you did here by breaking them out and checking for reversed on the shared animation.  

[Looping through svg elements]

hi gang, i'm sure I'm missing "something" here.

In the codePen listed, only the 30,000 and 158,000 are "wired up" to execute action.

 

1. I want to loop through all the ".boxes" and only perform the animation for that button. , but I can't seem to figure out if I'm using the wrong tool.

2.  should I be using a forEach loop here?

3. Is this the best way to target child elements for my timeline?

 

 

 

Thanks in advance.

See the Pen jOzoVOX?editors=0110 by zenogy (@zenogy) on CodePen

[Premium plugins for a static site.]

Hi gang, I'm a Greensock Club member, and am building a basic page. ( no build tools ) how can I use the svgdraw plugin?  I only see npm/yarn and CI/CD ( whatever that is).

[CodePen Pro - Thoughts?]

Your motion tricks tutorials "are the reason" I'm finally going to pull the trigger on pro. Although I've been using codePen for years, I never thought about it, but I've been dabbling with GSAP this past year and your viewBox tutorial was the one that inspired me to start collecting my work.  

Thank you for those BTW.  They're great!

[CodePen Pro - Thoughts?]

Hi gang, I've been thinking about going pro with the CodePen, and wanted to know from those that have, if it is worth it.   Do you find that you would be sad if you cancelled? Did/do you like others like codesandbox instead?   Where do you find CodePen most useful?

 

Thanks in advance,
- Jason

[Strategy to build fast Banner Ads with GSAP?]

Oh man, I would love to see this.  I thank you for responding!  You should make a video!!!

[Dyiiiiiinnnnnnnggggg to know what Club GreenSock Members are getting!!!]

Come on you guys...spill it! 😎

[Strategy to build fast Banner Ads with GSAP?]

Anyone have any suggestions on how to leverage GSAP AND code out banner ads without the use of animate?    I'm looking for a streamlined process I guess is what I"m getting at.