Popular Content

Showing content with the highest reputation since 03/17/2019 in all areas

  1. 5 points
    Rather than target the group, you need to target the paths in that group. Please try this: tl.fromTo("#outer_3 path", 1, {drawSVG:"0% 10%"},{drawSVG:"90% 100%", repeat:-1}); Does that help? Happy tweening.
  2. 4 points
    Are you asking if there is a GSAP plugin to help with that? If so, the answer is no. I'd probably clone the image, scale it to -1 and use a mask or clip-path to only show the heart shaped section. If you put together a demo we're happy to help with the GSAP related parts of your project. Happy tweening.
  3. 4 points
    Happy to help! Learn much and come back to teach others That is also a super nice feeling.
  4. 4 points
    I think the main problem with your approach there was that you were trying to live-edit a liveSnap array that was passed into the Draggable, but internally Draggable reads that upon creation and sets things up accordingly. In other words, it's not live-editable. You could just re-initialize a Draggable when necessary, like this: Does that help?
  5. 4 points
    Hi @oxhsun, Now things are getting much clearer. And I have already some suggestions. First I have to make some assumptions. One is that you want several boxes. In your example, you have a single box so, you need to create many more boxes otherwise, there is no way to have "all the red boxes" show up at the same time. (Technically, you have all the red boxes showing up as is, given that you have a single box in your HTML). With that in mind. You have to your your for loop to duplicate the current red box you have and then, make sure all duplicated boxes go somewhere different. Note that I changed your code a bit as it's more performant to animate transform properties (x,y) than it is to animate left and top CSS properties. Does that help?
  6. 4 points
    Hi Sameer, Welcome to the forums. To achieve what you are after what you need to do is make sure that none of the transforms applied to your tweened element are left at the end of the animation. For that you want to use clearProps - have a read in the CSSPlugin documentation. Another thing you want to do to make your life easier is to animate .from(), rather than .to(). Working backwards with your animation will help you as you will know where the element end as soon as you start working. Rather than creating the whole thing and, at the end, trying to make sure it lines up with your design. Happy Tweening!
  7. 3 points
    The ease is working just fine. Easing with opacity or alpha tweens are sometimes hard to see. If you temporarily set a position ease in your demo instead of alpha, you'll see that it is indeed working correctly. Happy tweening.
  8. 3 points
    I think this is what you need. Just move the container to the direction what you want and the inner part to the opposite direction with the same amount.
  9. 3 points
    Hi @DevSaver, we've been dealing with the same type of question over here ... I think it would help you.
  10. 3 points
    headlines_tl.progress(1,false) will certainly push the playhead to the end of the tween while supressing events ... is that what you're looking to do? To pause the Timeline, you can always use headlines_tl.pause() ... but I'm not sure if you want to jump to the end, or pause it 🤔 What is your overall goal?
  11. 3 points
    Yesss! thank you guys. What a service!
  12. 3 points
    You should refrain from using absolute values like -4.8 for the "delay" or "repeatDelay" properties. If a client asks you to change the timing of a single line of code it will affect every following line. That quickly turns into a nightmare situation especially for more complex animations. You're using TimelineMax so make use of the position parameter and relative values like "+=1" to make sequencing easier. You should also go through your css and reduce the redundant code because it's good programming practice and makes the code a bit easier to read. Use something like this in your css. .flower { position: absolute; transform: scale(0); } You also don't need sizzle.js: <script src='http://cdnjs.cloudflare.com/ajax/libs/sizzle/2.2.0/sizzle.js'></script> for a simple banner like this. That also makes the first 24 lines of your js file redundant as well.
  13. 3 points
    Hi @Bencius, You can certainly update the ticker content anytime and fire of the clone, position, duration logic for new content. But to have it update without noticing entirely depends on where the content is updated. If it's within the first visible portion of ticker, that would switch quickly at the start of the Tween and be noticed. If the affected text is outside of the visible area, then it would go unnoticed. If you are going to be dealing with dynamic content, I would look at creating content containers adhoc, appending them to a timeline, and calculating their duration based on their width. And "looping" would mean circling around and appending the same content again ... not repeating the tween. It would be one long ever changing timeline full of dynamic tweens. Hope this helps.
  14. 3 points
    I'm not sure I totally follow your question, but perhaps a cleaner approach would be to use a factory function that accepts a yoyo parameter, and then just string your animations together accordingly, kinda like: //a factory function for your slides that spits back a timeline function slide(panel, text, flowers, yoyo) { var tl = new TimelineLite(); //...build your animation accordingly return tl; } var master = new TimelineMax({delay:1, repeat:1}); master.add( slide(panel1, textMove_1, $("#flower_1, #flower_2, #flower_3, #flower_4, #flower_5"), true) ) .add( slide(..., true) ) .add( slide(..., true) ) // now for the last iteration, don't yoyo/repeat! .add( slide(..., false) ) ... So basically you can build out each iteration for each slide using a simple function, and tell it whether or not it should yoyo. I think you'll find that an approach like this makes your code much more maintainable, easier to tweak timings, and a pleasure to work with. After all, there was a large chunk of your code that seemed repetitive, meaning it could benefit from a function-based approach were you just feed in parameters for the differences/variables. I'd strongly recommend reading this article: https://css-tricks.com/writing-smarter-animation-code/ - once you grasp the concept, it can revolutionize the way you build animations. I hope that helps.
  15. 2 points
    I don't know this Swiper, never used. I am supposing it is what you are using to animate your sliders. If that's the case, it's the Swiper responsibility to animate your content smoothly. Now, if you were to replicate what is happening in the site you have referenced, you would have to calculate the delta (movement of) the mouse (or touch event), translate that to a fraction of the total of the movement and move your slides along it. Or, you would get that same delta and convert that into a "force" to be applied to the vertical movement and thus use physics simulation to generate the drag and acceleration of the vertical movement. I'm sorry if it sounds complicated but the creation of natural, smooth, movement is that involved.
  16. 2 points
    another option is to build your main timeline out of a series of tweenFromTo() tweens on your slide animations. In the example below you will see that the timelines (green, orange, grey) are only created once. They are never added to the master timeline. The master timeline is only adding tweens that literally scrub the playheads of those individual timelines. https://greensock.com/docs/TimelineMax/tweenFromTo
  17. 2 points
    Ok, not to beat a dead horse (wait, is that no longer politically correct?), but here's another approach. Rather than using snap at all, this uses hitTest and lockAxis.
  18. 2 points
    Finally the solution With modifiers plugin, I was able to achieve the desired result with: { x: 0, modifiers: { x: function (x) { return Math.round(x.toFixed(1)); } } }
  19. 2 points
    Yep, editing the prototype as @Rodrigo suggested should work. The checking instance stuff could be done like this: function animationType(obj) { return (obj instanceof TimelineMax) ? "TimelineMax" : (obj instanceof TimelineLite) ? "TimelineLite" : (obj instanceof TweenMax) ? "TweenMax" : (obj instanceof TweenLite) ? "TweenLite" : "undefined"; } Here's a quick function I whipped up that'll flatten the labels (find all labels in nested timelines and add them to the top level timeline that's passed into the function): function flattenLabels(tl) { var children = tl.getChildren(false, false, true), curTL, labels, p, i; for (i = 0; i < children.length; i++) { curTL = flattenLabels(children[i]); labels = curTL._labels; //undocumented for (p in labels) { tl.addLabel(p, curTL.startTime() + labels[p]); } } return tl; } Does that help?
  20. 2 points
    Happy to help. A top-notch forum is GreenSock's 'signature' service. Ha. See what I did there? Happy tweening and thanks for being a member of Club GreenSock.
  21. 2 points
    Thanks a lot !! You truly are a Super Hero =DD Now Ive learned a new method you are teaching me ! It feels great to learn new things ~ Thank you Dipscom ! Have a nice Day !
  22. 2 points
    I spent a few minutes looking at your code and didn't get very far. The purpose of these forums is to help people with questions related to the GSAP API. As you can probably imagine, it takes quite a bit of time to look at 200 lines of code and figure out what its supposed to do... and even more time to try to figure out what isn't working. I've never looked at Jonathan's code before, and even though it is working great... it would take awhile to study. Since you have 90% of things working and the only problem is the rendering of that "cube", I would suggest you create a new pen and just create a very simple demo that has that cube built the way you want it and try to animate it with a timeline (without any human interaction). I think if you come back with just a cube and a few lines of timeline code to animate and there is still a problem, we will have a better chance to help you.
  23. 2 points
    GSAP and many other popular JS libraries are hosted and Google Studio and are not counted against the total file size payload. In 99.999% of cases, you can load TweenMax to gain access to just about everything in GSAP. https://support.google.com/richmedia/answer/6307288?hl=en
  24. 2 points
    Is there any chance you can put a reduced code example? I'm stilll fuzzy on what is the end result that you are trying to achive. This is a handy explanation in case you haven't seen: Is '.stoneDestination' one element? Several elements? Who is 'them' in the above sentence? I am pretty sure we can work this out, we just need to get the correct picture you're trying to paint here.
  25. 2 points
    Hi, Yeah it is by design. A stagger method in a timeline returns a TimelineLite instance with a TweenLite instance for each element in the array passed to it, and since getLabelsArray is a method of the TimelineMax constructor you're getting undefined. Also keep in mind that, besides the parameters of each stagger tween passed in the stagger method, you have no further control over those instances created by these methods. If you want to place a label where each stagger animation starts, you might want to take a longer road and use a loop in order to create each individual tween and place the desired label inside a TimelineMax instance. The current code you posted, only gives you the possibility to add a label when the first stagger tween created by each stagger method starts. Beyond the fact that: console.log( children[i].getLabelsArray ); // -> undefined There is not much I can infer from that code. Perhaps you can provide a few more details in order to get a better grasp of the roadblock you stumbled in your code. Happy Tweening!!
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up