Jump to content
Search Community

JasonD

Members
  • Posts

    49
  • Joined

  • Last visited

1 Follower

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

JasonD's Achievements

  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.
×
×
  • Create New...