Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 06/15/2018 in all areas

  1. It looks like you're still targeting groups. The morphSVG plugin works path to path. The polyline is what you need to target. In your case, this should work. TweenMax.to("#backArrow", 1, {morphSVG:"#arrow", repeat:-1}); You also don't need separate SVGs to make this happen. Here's a simple demo with both polylines in the same SVG. Does that make sense? Happy tweening.
    3 points
  2. In that case I would recommend re-building your entire timeline. It gets too complicated to remove a set of staggered tweens, create a new set, insert them into the timeline and then adjust when the other animations (like ".nav") should start. I would create another function called "build new timeline" and call it whenever you need a new timeline. This is a comprehensive article (with videos) explaining how to use functions to build timelines and the many advantages: https://css-tricks.com/writing-smarter-animation-code/
    3 points
  3. Hi and welcome to the GreenSock forums. Thanks for the demo. It is very helpful. The problem is that each time you call setSlides() you are adding a new set of tweens (via staggerFrom) to the end of the timeline, thus increasing the amount of animations in the timeline and the duration. Open the demo below in a new browser window (edit on codepen), open the console and resize the window (horizontally) to see the console logs A solution here is to clear() the timeline BEFORE adding the new tweens. tl.progress(0).clear(); tl.staggerFrom($('.screen-slides div'), .5, {x: '-100%' }, 0.1) Resize the demo below horizontally and you will see that the duration does not change. *note: If you resize vertically the duration will change because the vertical height determines how many divs you append which affects how many staggered animations are inserted.
    3 points
  4. Thanks for the demos. There were 2 issues. When you add tweens to a timeline, they naturally play one after the other. Your timeline tweens were set to repeat infinitely so technically the first tween never ended and the second tween never would play. Those demos were using a VERY old version of TimelineMax. In recent versions TimelineMax detects infinitely repeating tweens and will put the NEXT tween after the first iteration of the previous tween. By using a position parameter instead of delay, I can tell each tween exactly when to start regardless of other repeating tweens:
    3 points
  5. Before DrawSVG it was maddening trying to work with SVG's across browsers.
    3 points
  6. Hi @aztekgold Please try this on line 24 .staggerFromTo($('.nav a'), .45, {opacity: 0, x: 0}, {opacity: 1, x: -50}, .1, 0.5); Hopefully that helps. Happy tweening.
    2 points
  7. You're welcome. That's how we roll in the GreenSock neighborhood. Thanks again for supporting the platform with your Club membership. Let us know if you have more GSAP problems or questions. Happy tweening.
    2 points
  8. Yes, thank you for all your help!!
    2 points
  9. Thank you Jonathan again for your time ! Indeed i used some dynamic switch which will auto add z transform to elements which would may interference iwht other objects. It is a pity that thing need to be browser based limited. Customers of our products can create amazing things with a WYSIWYG Editor, and at the end we need to limit their Creativity by browser issues and bugs. Still, i am more than thankful for your ideas and inputs here ! Awesome Service as always and awesome Tool ! Cheers and happy Tweening to you al l!
    2 points
  10. Thank you! Of all the little variations I tried, somehow that wasn't one of them. These forums are always so great/helpful.
    1 point
  11. Hi @ohem If I understand your desired outcome, I think you'll want to shift the children and then add the new conditional timeline. The stagger is also coming before the label because you have an offset on the label so it won't shift that stagger tween. You could have the stagger start at the label and then it would work correctly. Something like this maybe. Does that help? Happy tweening.
    1 point
  12. Thank, this is a brilliant article Now my second tween fails when resized
    1 point
  13. Ah, it sounds like you're just targeting the wrong element(s). For example, "nextc" must be a <div> that the software is wrapping around your SVG stuff. You can't morph a <div>. You've gotta target a <path>. MorphSVGPlugin can actually convert other shapes like <circle>, <polyline>, etc. but you still need a way to target them with a selector of some kind. In other words, if you have a bunch of <circle> elements, for example, you need them to have IDs or something that'd allow you to say "I want that circle that's the 3rd one from the top" or whatever. Hopefully Captivate allows you to assign IDs to the SVG elements. If not, you may have to get more creative in how you target things. Like in your sample code, there's a <g> with an id of "navNext", and the <polyline> inside that has a class of "cls-2", so if you want to morph that, you could do: MorphSVGPlugin.convertToPath("#navNext .cls-2"); TweenMax.to("#navNext .cls-2", ...); So the main problem seems to be figuring out out to select the SVG element(s) you want. See what I mean? It's really tough to troubleshoot blind, so if you need more help it'd be best to provide a codepen or something we can actually look at.
    1 point
  14. Sure, your approach is totally fine. While I generally love the idea of modularizing chunks of your animation code into functions (as described in https://css-tricks.com/writing-smarter-animation-code/), you shouldn't feel the NEED to do that if you've just got one or two tweens. I'd favor more concise code in that case. But yeah, it looks like you've got the general idea. Enjoy!
    1 point
  15. Hm, it looks like you're only updating a variable but that won't somehow change what was previously evaluated/declared in your tween vars object. That's unrelated to GSAP - it's just how JavaScript works. If you need it to be dynamic, you could use function-based values like this: I leveraged a timeline just because it mimics what you said you're trying to do in your "real" project.
    1 point
  16. Hi and welcome to the GreenSock forums. First I love the avatar!!!! Second, yep there's a lack of documentation for GSAP + React / React Native out there. Unfortunately tools like Pose and Transition Group help only with simple tasks, when the time comes to make complex animations things get a bit complicated. There is (actually was) a tool for that (https://github.com/azazdeaz/react-gsap-enhancer) but is no longer maintained so not much to do there. Also in this scenarios we run into React's declarative nature, which is quite unique and the fact that the React team doesn't help too much in getting access to the DOM elements. In fact I've read some comments and Tweets from Dan Abramov (creator of Redux and part of the React and React Create App teams), where He declares that accessing the DOM nodes should be a no-no and that is anti-pattern. Obviously Dan hasn't done a single complex animation in His life on a React app ;). Back to the issue the most robust tool I use (and that's just one guy's opinion) is React Transition Group (RTG), because it takes care of the DOM operations and reconciliation when the components get mounted, unmounted, updated, etc., so with it we can take care of only creating our GSAP code. The caveat (there's always one of those, right?) is to create the transition component to use GSAP in it, but once you get the hang of it you'll see is not too complicated because RTG's API is quite simple. Here are some samples using GASP with RTG: Simple list of elements (this has some commented out code, that's the code to use... [sigh] CSS Transitions, but the sample actually uses GSAP) https://codesandbox.io/s/7lp1q8wba Mount / UnMount a component https://codesandbox.io/s/yvye9nnw Draggable Rotation https://codesandbox.io/s/jrkbkxeqy Now the first two need a major update because they're using React 15.x, when you could still use string refs for the dom elements. Now a days you need a different approach for it, like this: But updating it shouldn't be too complex. If you still find some issues on the road, please don't hesitate to create a codepen or sandbox to get a look at it. The idea is to encourage people to keep using GSAP and spread it as the standard for web animations. Happy Tweening!!!
    1 point
  17. Hi @kbeats Welcome to the forum and thanks for joining Club GreenSock. I have no experience with Adobe Captivate, but I have a couple things you can try. First, can you target the SVGs (or their parent divs) for a simple tween? Something like opacity. I'm just curious if that works or if this is just something with the MorphSVG plugin. I can't see your SVGs, but I'm assuming they're already paths, correct? If so, you wouldn't need to use the convertToPath() method. That's for primitive SVG elements like <rect> <circ> etc. Also, are the SVGs made with one path or are you trying to target a group? You said you inspected the file and the divs have names of "#nextc" and "#backc". Do the SVGs have an ID or class? More importantly, do the target paths themselves have any sort of ID or class? If the paths have no identifiers, you could try something like this. TweenMax.to("#nextc path", 1, {morphSVG:"#backc path"}); That's assuming there is an SVG in that div and it only has one path. Without seeing your actual SVG code, I'm just shooting in the dark here. Hopefully something I've listed will point you in the right direction. Happy tweening and welcome aboard.
    1 point
  18. I'm not sure I understand your question. Wouldn't it be as simple as: if (variable === true) { TL4.TL.add(someOtherTimeline, position); } ? (I have a strong suspicion that I misunderstood though) Or maybe you meant: if (variable === true) { var master = new TimelineLite(); master.add(TL1.TL).add(TL2.TL).add(TL3.TL).add(TL4.TL); //assumes you want them to play in sequence. } If you need help, the best thing to do is to create a reduced test case in Codepen (without your real NDA-clad assets) and post it here so we can poke around and see what's going on. Happy tweening!
    1 point
  19. I'm not sure which images you're referring to, but if you want to make sure everything is ready to animate you can just use these ways: $( document ).ready(function() { // your tweens here }); $( window ).load(function() { //your tweens }); The first way will run once the DOM is ready for Javascript. The second way runs once the entire page (i.e images) is ready. More info about when the DOM is ready vs when all images are loaded etc... can be found here: https://learn.jquery.com/using-jquery-core/document-ready/ I hope this helps.
    1 point
×
×
  • Create New...