Jump to content
Search Community

JasonD

Members
  • Posts

    49
  • Joined

  • Last visited

Everything posted by JasonD

  1. 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.
  2. 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
  3. Thanks ya'll. I'll take a look at puppet warp.
  4. 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.
  5. 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
  6. 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.
  7. 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.
  8. 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.
  9. 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
  10. 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.
  11. This was ripped from here: https://codepen.io/PointC/pen/wmmmmK
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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).
  20. 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!
  21. 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
  22. Oh man, I would love to see this. I thank you for responding! You should make a video!!!
  23. 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.
×
×
  • Create New...