PointC last won the day on July 20

PointC had the most liked content!

PointC

Moderators
  • Content count

    2,267
  • Joined

  • Last visited

  • Days Won

    188

Everything posted by PointC

  1. PointC

    How to manage GSAP animation in mobile device

    Sorry, but I'm not really following your question. It sounds like you may need to read some more about media queries. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries A good article on CSS Tricks https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ If you have any GSAP specific problems or questions, we're happy to help.
  2. PointC

    How to manage GSAP animation in mobile device

    Explain which part? The ternary operator? It's a shorthand version of an if/else statement. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator It gives you the same result as this: if (window.innerWidth < 737) { topScroll = 50; } else { topScroll = 100; } For more info about responsive design, I'd recommend an in depth reading of those threads I listed above.
  3. PointC

    How to manage GSAP animation in mobile device

    I'd probably just set a variable depending on window width. Maybe something like this: var topScroll = window.innerWidth < 737 ? 50 : 100; // then add it to your tween TweenMax.to(".signup_header", 0.1, {css:{display:"block", top:topScroll}, ease: Power4.easeOut});
  4. PointC

    Pause Timeline on Window Resize Only Works Once

    Please try creating your timeline outside of the resize function and play/pause it depending on window size. You also have a typo on line 10: // bad tl.pause // good tl.pause(); Happy tweening.
  5. PointC

    How to manage GSAP animation in mobile device

    There are numerous threads about responsive animations and media queries. You can use the forum search feature to find them. Here are a few to get you started. Happy tweening.
  6. PointC

    SVG animation not working on site

    These threads may help: Happy tweening.
  7. PointC

    Latest Version of GSAP compatibility issue with Scroll Magic

    I haven't seen any problems myself or had any reported here in the forum. Here's an old ScrollMagic demo pen of mine that I just updated to GSAP 2.0.1 and all seems to be working correctly. If you have a demo that isn't working correctly, we can take a look for you. Happy tweening.
  8. PointC

    treating nested timelines like AE pre-comps

    That'll come down to how you structure your HTML/SVG (or whatever you're animating). With an SVG, for example, you can use the <g> tag to wrap elements and target the child elements individually or as a group. Happy tweening.
  9. PointC

    treating nested timelines like AE pre-comps

    Hi @exploitoholic Welcome to the forum. There may be a bit of a misunderstanding here. A nested GSAP timeline isn't the same as a nested composition in AE. A timeline is basically a collection of tweens. You can add any tweens to that timeline and manipulate any properties of any element. You can't animate properties of the timeline itself. You can do certain things to the nested timeline like timeScale(), pause(), play() etc. But you can't rotate or change the opacity of a timeline. All that is done with the individual tweens on that timeline. Does that make sense? Happy tweening.
  10. PointC

    d3.js with gsap?

    I'm not really sure what the question is here. Are you asking if GSAP and d3 can work together? I don't know much about d3, but there are some CodePen demos using both. https://codepen.io/search/pens?q=d3 gsap&amp;page=1&amp;order=popularity&amp;depth=everything&amp;show_forks=false
  11. PointC

    SplitText menu help

    Happy to help. I'm glad to hear things are starting to click for you. As long as you're having fun with each() loops, here's a bit more info. All the animations don't have to be the same. Sometimes you may want that, but you may also want some variety. You can still have each() do the heavy lifting for you. Using each element's index allows you to create different animations. Here's a version where you can use the index and each 'y' position animation is different. You can also create entire animations and/or properties in arrays and plug those into the tweens based on the index. Here's a version showing the basics of how that's done. Hopefully that gives you some more ideas about what can be done with loops. I'm glad you're now obsessed with GSAP and moving from lurker to a more active status. It really does get more fun as you increase your forum participation. Have fun and happy tweening.
  12. PointC

    SplitText menu help

    You can add the SplitText animation to the timeline that animates the blue box. That timeline is the same as creating one manually. You can add whatever elements you want, use the position parameter, add callbacks etc. The each() method just does the heavy lifting by looping through and easily targeting the child elements. So, in your example, you can create a a new SplitText from the <h2> in each project tile. You then add that SplitText stagger to the end of the timeline that animates the blue box into view and you'll be all set. Hopefully that helps. Happy tweening.
  13. PointC

    Reverse a Morph and then fluidly repeat from the start

    Are you looking for more of a smooth pulse here? If that's the case, I think a Sine.easeInOut would probably work well. Here's a fork of your pen: I commented out the rotation and cranked the timeScale up to 10 so it's easy to see what's happening. Is that more the look you wanted? Happy tweening.
  14. PointC

    DrawSVG Plugin

    Yep - that's gonna depend on how you drew your path in AI. The two from your demo were drawn differently so they needed separate tweens. With open paths in Illustrator it's hard to tell which way it goes, but a little trick can help. Go into the stroke panel and add an arrowhead to the end of the path while you're working. If a path is backwards you can reverse it in the upper menu pull-downs. Object --> Path --> Reverse Path Direction. Then just remove the arrowheads before you export for SVG animation. Hopefully that helps. Happy tweening.
  15. PointC

    Reverse a Morph and then fluidly repeat from the start

    For a seamless rotation you can also set that rotation ease to Linear.easeNone Happy tweening.
  16. PointC

    SplitText menu help

    For both sets of link hovers to work, you can add both each() loops to your onComplete function. After you animate the social links by character you revert() them and split by word. I'm not sure if this is actually necessary as they're each individual words anyway, but I left it the way you had it. Your click handlers have a couple issues. The first is each time you click, you're adding time to the tl timeline for that element. You'll probably want to create a new timeline in that handler. The second is the tween that removes the menu. You have it set up with a staggerFrom tween, but there are two vars for a fromTo() tween. It doesn't have to be a stagger since there is only one element and you don't need a fromTo() tween if all you're doing is making the menu exit. Since you're exiting you'll also want an easeIn instead of an easeOut. // bad tl.staggerFrom(navMenu, 1, { y: -450 }, { ease: Back.easeOut.config(1.2), y: 0 }); //good .to(navMenu, 1, { y:-450 , ease: Back.easeIn.config(1.2)}); I created a separate timeline in the mainLinks click handler that sends the menu back up, but I left the socialLinks click handlers broken so you can see the difference. Hopefully that's what you needed. Happy tweening.
  17. PointC

    DrawSVG Plugin

    Hi @Fábio Novais Is this what you need it to do? Happy tweening.
  18. PointC

    PixiPlugIn - How to Use With Animate?

    Hi @dada78 The Pixi plugin is a free plugin. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/plugins/PixiPlugin.min.js"></script> Here's a good pen that shows what's included: I'm not an Animate user so I don't have any .fla blur examples, but perhaps someone else can jump in with an example. Happy tweening.
  19. PointC

    Reverse a Morph and then fluidly repeat from the start

    Hi @pauljohnknight That three second delay is your second tween: .to("#shape-2", 3, {morphSVG:"#shape-1", rotation: 180,ease: Power1.easeOut}) That morph is happening but #shape-2 is hidden so you see nothing. If I understand your desired outcome correctly, you only need the first tween on the timeline. Is that what you meant? Edit: Shaun is typing fast today.
  20. PointC

    Fade In and Fade Out while using ScrollMagic

    I'd echo @Sahil's advice about checking out the ScrollMagic demos and creating separate scenes. That being said, you can make it work with one timeline like you have it now. You'd just add your title fade tweens and some position parameter labels. More info about the position parameter: https://greensock.com/position-parameter Happy tweening.
  21. PointC

    SplitText menu help

    The "?" and ":" are part of the ternary operator. It's basically a shorthand if/else // ternary tl.reversed() ? tl.play() : tl.reverse(); // if/else if ( tl.reversed() ) { tl.play(); } else { tl.reverse(); } More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator Calling the makeItWork() function twice isn't absolutely necessary. It's just a habit of mine. The jQuery hover() method is shorthand for mouseenter and mouseleave so it takes two handlers. In this particular case we want the same function called for both, but you may want different functions called for each event. I'm just in the habit of putting them both in even when they're the same, but in this case it would work fine with one. More info: https://api.jquery.com/hover/ Hopefully that helps. Happy tweening.
  22. PointC

    SplitText menu help

    The problem is you're targeting all the characters in each hover. The text is already split into divs so you could use an each() loop to create a timeline for each link and play/reverse that on hover, but target the divs in that <li> instead of the chars. Is this what you need it to do?
  23. PointC

    Dynamic hover

    I thought this was a SplitText opacity question? Is this what you needed?
  24. PointC

    ImmediateRender

    That's what I thought. I just wanted to make sure there wasn't a problem that you needed help with. I'm glad you have it all figured out.
  25. PointC

    ImmediateRender

    Hi @mikel That looks like the behavior I would expect. Was there a question in there or were you just pointing out the need to use immediateRender:false? I wasn't quite sure. Happy tweening.