Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About InTheOne

Recent Profile Visitors

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

InTheOne's Achievements

  1. Hello, this code works on all browser except IE and I was wondering if there is a work around for IE: let mobile_menu = gsap.timeline({ scrollTrigger: { trigger: "#site_content", toggleActions: "play none none none", start: "top top", end: "bottom bottom", onUpdate: (self) => { if(self.direction == -1){ mobile_menu.reverse(); } else if (self.direction == 1){ mobile_menu.play(); } } } }); The issue is with calling "self" in the onUpdate Thank you!
  2. @Carl, Thank you for your quick response, I really appreciate your help! I actually forked this from an older project b/c it was a good simple reproduction of the issue I was having (hence the older GSAP). I know this may sound strange but I learned jQuery before I learned regular JS and primarily work with WordPress so I'm kind of hooked on jQuery but have started to learn more about vanilla JS lately. Thanks again!
  3. Hi, I'm using jQuery.each(); to build a timeline for multiple elements and have found good documentation on how to start the animation by clicking on the element that has the animation assigned to it, but I can't figure out how to use a button within the element's container to reverse the animation. I'm sure I'm pretty close I just can't quite figure out the correct syntax to "find" the animation when I'm not clicking on the element with the timeline assigned to it. Here's the example: $(".card").each(function(){ var myHeader = $(this).find("h1"); var myParagraph = $(this).find("p"); var tl = new TimelineLite(); tl.to(myHeader, 0.5, {x:100}) .to(myParagraph, 0.5, {x:100, color:"pink"}) .reversed(true);//this reverses the playhead at a time of 0. when you "un-reverse" on click it will play forward this.animation = tl; }) //un-reverse the animation of the card that is clicked on $(".card").click(function(){ this.animation.play(); }) $(".close_it").click(function(){ $(this).parents(".card").animation.reverse(); })
  4. Hi! My fault I did not add the objects into the Config object properties vars (I'm combining two examples into one with this slider). Actually, I have not seen the vars list (in middle of this page: https://greensock.com/docs/v2/Utilities/Draggable) until now which makes things so much easier 😅. @PointC I'm actually creating 3 different versions of your slider now. They are all still in development but very close to being done. As soon as I get them finished I'll create a simple version of them for CodePen 👍.
  5. This slider by Blake Bowen has and if statement like this: if (draggable.isPressed || draggable.isDragging || draggable.isThrowing) { It looks like the .isPressed and .isDragging no longer works in the V2 of Draggable. Is there an alternative I can use? https://codepen.io/osublake/pen/veyxyQ
  6. Thank You! I'll post my version which is going to be a simpler hero slider that is not full screen when I'm done. Much appreciated.
  7. I made a simpler example to troubleshoot why the drag function is not updating the active slide count: https://codepen.io/jonroc/pen/ZEGRRLY function slideAnim(e) { oldSlide = activeSlide; // dragging the panels if (this.id === "dragger") { activeSlide = offsets.indexOf(this.endX); console.log(activeSlide); } On the old setup the activeSlide variable is getting updated properly but with GSAP3 it always returns -1
  8. Oh, no that fixed the issue for me in my application. I'm not sure what would be different about my setup to where I needed the 0 for it to work.
  9. Hi, sorry for the slow responce. This issue was that I did not have a 0 in front of my .5rem. When I added that it solved the issue.
  10. Hey, the man himself 😁. Thank you, I'm much closer now but: There is an issue with the dots stagger animation Sometimes when I swipe right to left and then try to click the left arrow it gets stuck or I click the right arrow and it jumps way back to slide one or two. Sorry I thought this would be a little bit easier, this slider is a bit out of my level of expertise. Best.
  11. I'm trying to convert Craig Roblewsky's CodePen Horizontal full-screen slider w/4 controls to GSAP 3 but I'm getting a console log error that I don't understand. Can anyone take a look and see if it's a simple fix? I'd like to use this slider with GSAP3. Thanks!
  12. Ah, I was using ".5rem" instead of "0.5rem" which was actually causing the problem.
  13. +1 for full rem support 😀, I just spent an hour and a half trying to figure out why my animation did not look right only to find out it was related to use rem.
  14. That is great! I'm including my new Pen in case anyone else wants to do a simpler version of the airplane CSS sprite. https://codepen.io/jonroc/pen/BayYKYM
  15. On Firefox my fancy cat walk does not work at all on my website: https://phpstack-74099-1024495.cloudwaysapps.com/ On Codepen it works jankely. How can I get this sweetness working on Firefox?