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. Nice work @mikel ? It's definitely easier with separate lines/paths rather than using a polyline.
  2. Okay, I think I understand what you're trying to do. Here's one way to do it with a SVG polyline along with some circles and text. It's a basic example, but maybe it'll help. https://codepen.io/PointC/pen/ZdvaRb Happy tweening.
  3. PointC

    Nine Flipcards

    Yep, definitely study and reverse engineer the bread demo. That one uses jQuery each() to loop through. More info: https://api.jquery.com/each/ If you don't want to use jQuery, you can use a regular loop. Here's a demo from a different thread, but shows the basics of looping through a node list and adding a listener. https://codepen.io/PointC/pen/bPVeNd Happy tweening.
  4. Hi @Giuseppe Simonetti, Welcome to the forum. I think @mikel has a nice solution for you there. It was unclear to me if this was a scroll triggered animation or something full screen. You mentioned trying some things so we'd certainly take a look at what you have so far. Maybe you could make a demo? More info: Happy tweening and welcome aboard.
  5. Hi again @troymartz, I moved your thread to the main GSAP forum. We're glad you're excited about GSAP and thank you for joining Club GreenSock. Your post has a lot to go through so you may want to break it down into smaller bites with more GSAP specific questions or goals. That will probably yield more responses from the community. Happy tweening and welcome back.
  6. PointC

    SplitText Loop

    The problem there is you're using "end" as a label for all the letter groups in the loop so they all fire at the same time. You need a unique label for each iteration. You can do that by creating a label like "end" + i. https://codepen.io/PointC/pen/PrEKJY Happy tweening.
  7. Hi @troymartz Welcome to the forum. Are you offering a job here? I ask because you posted in Jobs & Freelance, but you said: It was unclear to me if you were just looking for some guidance or hiring a freelancer to help you. Any details you could post in regards to that would probably give you the best chance of a response from qualified GreenSockers. Thanks and welcome aboard.
  8. PointC


    Good call. We'll get that kicked upstairs to the big guns and it should be patched up shortly. In the meantime, you should bookmark this pen as it's up to date. https://codepen.io/GreenSock/pen/djXzyR Happy tweening.
  9. PS https://greensock.com/immediateRender
  10. PointC

    Nine Flipcards

    You'd want to look at the isActive method to prevent clicks when the animation is playing. https://greensock.com/docs/TimelineMax/isActive() You could break the timeline into two or use an addPause in the middle. We've had a few discussions about different eases for reverse. That's entirely up to you. Loops are your friend. Happy tweening.
  11. With multiple fromTo() tweens, the last one in the sequence will be where the target will sit when the code loads and the timeline is paused. Take this code for example: var tl = new TimelineMax({paused:true}); tl.fromTo(target, 1, {x:100}, {x:200}); tl.fromTo(target, 1, {x:200}, {x:300}); tl.fromTo(target, 1, {x:300}, {x:400}); That target will be sitting at x:300 until the timeline plays. At that time it will jump back to 100 and play the tweens in sequence. https://codepen.io/PointC/pen/dBZmzJ You can override that with immediateRender:false on the 2nd and 3rd tweens. Does that make sense? Happy tweening.
  12. PointC

    SplitText Loop

    Is this what you need? https://codepen.io/PointC/pen/agVqJe Happy tweening.
  13. You could also use set() and to() tweens if you like. Some people find that a bit less confusing than from() tweens. I'd also like to point out the yoyo and repeat properties would allow you to use less tweens in your timeline. So your example could be written like this: tl1.fromTo('#green', 1, {opacity: 0}, {opacity: 0.75, yoyo:true, repeat:1}); Happy tweening.
  14. On paused timelines with from(), fromTo(), staggerFrom(), staggerFromTo() tweens, immediateRender is true. Setting it to false is your best option. There were some recent changes between 2.1.0 and 2.1.2 regarding this default behavior. More details: https://github.com/greensock/GreenSock-JS/releases/tag/2.1.2 Happy tweening.
  15. I'm not 100% sure what you're trying to do, but to animate filters like that you'll need to use the attr plugin. (auto loaded with TweenMax) Here's a really basic example: https://codepen.io/PointC/pen/gNXXXQ Hopefully that helps. Happy tweening.
  16. Sounds like you haven't loaded the ScrollMagic GSAP plugin. <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
  17. PointC

    replay timeline

    PS In case you haven't seen it — you can use GSDevTools. It's not quite the same as the visualizer from the video, but makes testing and debugging quite a bit easier. https://greensock.com/gsdevtools Happy tweening.
  18. PointC

    replay timeline

    There isn't a timeline visualizer tool nor do I think there are plans for one in the future. See this thread: If you really want to learn to write modularized code that's super easy to maintain and make quick changes, check out this post by the mighty @Carl that I mentioned above: https://css-tricks.com/writing-smarter-animation-code/ Happy tweening.
  19. I don't know if it's just me, but this demo really bogs down. I see some monster size .pngs in there. Maybe try to simplify things a bit. The less convoluted the demo the better. We can't get too deep into ScrollMagic or general coding help, but anything GSAP related is fine.
  20. Yeah, I wish we had the resources to help with everything, but there are only so many of us and we need to focus on GSAP questions and problems. Just to be clear on your project — setting a duration for the scene will make your life easier because the enter and leave triggers won't be sitting on top of each other. So you could do something like this: https://codepen.io/PointC/pen/RzLBQq Hopefully that helps a bit. Good luck and happy tweening.
  21. Well, you'd have to have some kind of second trigger to set the animation back to the beginning. You'd also want to use ScrollMagic's events to play the animation rather than setting the tween in the scene. https://scrollmagic.io/docs/ScrollMagic.Scene.html#event Something like this: scene.on("enter", function(event) { tlbox.play(0); }); You could use an onComplete to rewind the animation back to the beginning, but that probably isn't a good solution since the user may have stopped scrolling at that point. A lot of this will be tricky since you don't have a duration set. The enter/leave triggers are the same so this will definitely be odd. ScrollMagic does have premium support available: https://support.scrollmagic.io/
  22. Here's a basic horizontal scroll from a different thread. Maybe it'll help you, but ScrollMagic is not a GreenSock product. https://codepen.io/PointC/pen/vayLYy ScrollMagic also has a premium support area now: https://support.scrollmagic.io/
  23. I'm not sure I follow, but I think you'd want to push each draggable instance into array when you create it. Then loop through the array and kill() them all when you're done with them.
  24. Happy to help. I'm sure it will all come back to you quickly, but let us know if you have additional problems or questions. Happy tweening.
  25. It's a case of needing to set immediateRender:false. (It's true by default) https://codepen.io/PointC/pen/ydzorx Happy tweening.