Jump to content

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

PointC last won the day on August 14 2019

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. Yeah, I really wish we had the resources to help with whole projects. My advice is to make just one div behave as you'd like and then add additional elements into the accordion. Always start small and build from there. If you have GSAP related problems or questions, we're happy to help. Happy tweening.
  2. I think you asked the same question last week. If you have a specific GSAP related problem or question we're happy to help, but we can't dive in and create entire projects. In your original thread @ZachSaucier linked to another thread which should be helpful: Here are a couple more: You can also use the forum search feature to find additional accordion threads. If you have GSAP questions/problems as you progress, we're happy to help. Happy tweening.
  3. How about this: timeline.fromTo(nextHeading, 1, {color: 'white'}, {color:"red"}); Does that help?
  4. That's happening because you keep adding tweens to the end of the timeline. Each click adds a one second tween in your animateSlide() function. You may want to use timeline.clear() at the beginning of that function. Happy tweening.
  5. Yep, masks can be fussy like that. Glad to hear you solved it. Happy tweening.
  6. Do you need to reverse it from the end? I'd just play/reverse on hover like this: https://codepen.io/PointC/pen/qeVZmV Does that help? Happy tweening.
  7. I'd probably just use one of the ScrollMagic event handlers. You could rotate those objects with a separate tween or timeline and call that tween with a scene end event handler or maybe fire it when the scene reaches a certain progress point. You could also just use a separate trigger. Keep in mind that ScrollMagic is not a GreenSock product. Check out the event docs here: http://scrollmagic.io/docs/ScrollMagic.Scene.html#event:end Happy tweening.
  8. Glad to hear it works now. Thanks for letting us know. Kinda weird though. I did the same thing Zach did in trying it locally and had no problems. ? Oh well, you fought the gremlins hard today. Time to go enjoy some much deserved pizza. ? Happy tweening.
  9. How about removing jQuery from the equation? var introH1 = document.querySelector('#intro h1');
  10. Have you tried this? var $introH1 = $('#intro h1')[0];
  11. Welcome to the forum. You can check out the Bezier plugin: https://greensock.com/docs/Plugins/BezierPlugin The MorphSVG plugin has a .pathDataToBezier() method. https://greensock.com/docs/Plugins/MorphSVGPlugin You may also be able to make it work with a textPath animation. I wrote about that here: Demo from that thread: https://codepen.io/PointC/pen/vRzmeO Hopefully that points you in the right direction. Happy tweening.
  12. Just to add (ha) to Zach's excellent advice. You'll often use the .add() method to add a label or a function (without parameters) to the timeline. The biggest use, at least for me, is building a master timeline and adding nested timelines to the master. Check out this great article for all the details. https://css-tricks.com/writing-smarter-animation-code/ Happy tweening.
  13. Are you talking about the actual hover or did you mean when the cursor gets close to the button? If it's the former, I'd follow @ZachSaucier's advice. If it's the latter, we do have some threads that show a menu button pulling towards the cursor as it gets close to the hover target. I just wasn't quite sure what you meant. Happy tweening.
  14. Here's a SVG button I use on my own site as well as some client sites too. Maybe it'll give you some ideas. https://codepen.io/PointC/pen/PMmbpz Happy tweening.
  15. @OSUblake aren't you still on vacation? ?️ The pull of the forum is just too strong for you to resist and nobody even mentioned canvas in this thread.
  16. PointC

    Text animation

    Zach is getting clever today. My stuff is usually part of a larger SVG. I can't work too much with CSS because it scares me. Yours also isn't working correctly on my iPad. It's drifting off the right side of the window for some reason.
  17. PointC

    Text animation

    I do so it will scale perfectly. I'm old with a thick skull so I need things that are simple. ?
  18. PointC

    Text animation

    If you wanna get fancy you could also use a SVG mask with a gradient resulting in a nice feathered edge. https://codepen.io/PointC/pen/EqmxZV Happy tweening.
  19. If you want to make this work with ScrollMagic, here's a quick demo of what I was advising — measure each elements position from the top. Here I've just created a bunch of divs in a grid and looped through to create arrays which act as 'rows' in a master array of targets. I then create a new ScrollMagic scene for each 'row' and use the .staggerTo() method on the targets. Note: This is not responsive. It will only calculate on page load. You'll have to kill and recreate the ScrollMagic scenes on resize, but this should get you started. https://codepen.io/PointC/pen/aeJxJE Happy tweening.
  20. Is the window loaded and DOM ready? Sir @Jonathan has written about this several times. Here's a bit of his wisdom. Does that help?
  21. Good call. That demo I posted was a fork of a user's question in a different thread so I wasn't paying much attention. Though I'd probably revert() and re-split on resize because it looks a bit odd to have two lines moving at once. Just my two cents. YMMV.
  22. Split it twice and you'll be good to go. https://codepen.io/PointC/pen/pxBMvy Happy tweening.
  23. Off the top of my head I'd say loop through and get the distance from the top for each element by using getBoundingClientRect(). Based on that position you can add the matching ones to an array or possibly give them a class. By doing it that way, you would only need one trigger with an offset based on any given row's distance from the top. Hopefully that makes sense. Sorry, I don't really know of any examples to show you.
  24. The stagger works just fine. Your original post said you wanted three images per row. Now you want between 1-3 images per row depending on screen size. The problem in your original pen is your each() loop targeted the .item overlay. You then tried to stagger the target, but each target was only 1 element. It's hard to stagger one item. If you're trying for a flex layout with varying numbers of images in each row, then no, you probably wouldn't want to wrap those in a parent div. The problem with what you're doing is you don't know how many elements will be in each row until you know the screen size. If you want each row to trigger a stagger of its children, you need to figure out how many elements are in each row and group them so they have some kind of relationship. You could probably put them into an array and create a tween and trigger for each array of targets.
  25. That's behaving exactly as expected. You're targeting each item. If you want three images per row and a stagger reveal of those images, you need to redo your html a bit. Place three items per row and then target the rows in your each() loop instead of each item. Make sense? Happy tweening.