Jump to content
GreenSock

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

Leaderboard

Popular Content

Showing content with the highest reputation on 08/07/2019 in all areas

  1. Ah, I understand what you're asking now. There is a way to do this in ES6 only, but it'd require changing your keys anyway. See this StackOverflow post for more information. So I'd just use a text editor and replace all of the opacitys and alphas with autoAlpha.
    4 points
  2. Hey nunoh and welcome to the forums! I am not familiar with Vue, but if you comment out the onComplete the circles all animate fine. It seems to be related to how you're clearing the circle from the array once it's completed. Maybe you can try a different method of deleting them from the array that doesn't mess up the index of other circles?
    4 points
  3. I think you might be looking for the offsetY property. That should make it pretty easy Docs: https://greensock.com/docs/Plugins/ScrollToPlugin scrollTo:{y:"#category-content", offsetY:100, autoKill:false}
    4 points
  4. You can put all the functions you want inside the function you call with delayedCall(). Does that help?
    3 points
  5. Hey @LeoZ, Just for fun - a simple version ... https://codepen.io/mikeK/pen/KOQjMw Happy tweening ... Mikel
    3 points
  6. 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.
    3 points
  7. 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 points
  8. Before you start digging into source code, you should at least try troubleshooting your SVG code first. You have have a pointless m0 0 at the end here. <path id="source" style="" d="m256 421h30l60-135h-150zm0 0"/> Remove it, and it seems to work fine. <path id="source" style="" d="m256 421h30l60-135h-150z"/>
    2 points
  9. On top of Zach's great advice, try to avoid using regular selectors and use $refs instead: https://vuejs.org/v2/api/#ref
    2 points
  10. It wouldn't be a true "repeat" if it wiped out values and used new ones. But @PointC gave a great solution, and here's another alternative: https://codepen.io/GreenSock/pen/482b8b02df7d5f3b970861163bdb17a0?editors=0010 TweenMax.to("#box", 2, { rotation: "+=120", transformOrigin: "50% 50%", onComplete: function() { this.invalidate().delay(2).restart(true); } }); Does that help?
    2 points
  11. 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.
    2 points
  12. Don't know about swapping things out. What I do know is that when you change something in the data object, Vue runs those changes asynchronously. It uses a Promise to make that change in the next event loop tick. Using a fromTo(), from(), or set() tween might be causing problems because those changes are supposed to be synchronous. But again, I think the main issue here is that timelines don't belong in the data object. Just like in React, Timelines don't belong in the state object.
    2 points
  13. Thank you for your input Blake! I can attempt to simplify the points and remove those which I do not require however some of these points are converted using the `MorphSVGPlugin.convertToPath` function which I would have imagined would have either formatted them as required or removed the points which it did not need, either way the issue still seems to be valid based on the information I provided.... I am not the Author of most of the graphics in use at the current time, I am using stock graphics for the prototyping and hence why I didn't attempt to fiddle with the point data therein. In short, I agree with what your saying however I feel like there other cases which may cause the issue to exhibit itself as I have attempted to explain in the post above e.g. point data with only 1 point etc. In such cases it can be handled to either use the transform origin or a 0 coordinate etc but I just wanted to make the issue known such that it could be fixed. Please let me know if my code above didn't solve this issue in the correct way and what your take on the correct logic therein would be for such cases. Regards!
    1 point
  14. @GreenSock you might want to check out this problem and see if it needs fixing.
    1 point
  15. This answer was perfect, thanks @ZachSaucier!!!!
    1 point
  16. Ok got it it actually makes sense! Thanks a lot
    1 point
  17. There would be a few ways to do that. I think the easiest in this case is to place the tween in a function that gets called at the end of each tween. function spinMe() { TweenMax.to(box, 2, { rotation: "+=120", transformOrigin: "50% 50%", onComplete: spinMe }); } spinMe(); Hopefully that helps. Happy tweening.
    1 point
  18. How about this: timeline.fromTo(nextHeading, 1, {color: 'white'}, {color:"red"}); Does that help?
    1 point
  19. Very interesting - it definitely seems Vue-related. If I remove Vue from the equation, it all works as expected. From what I can tell, the issue gets introduced as soon as you load CSSPlugin which enables the "autoCSS" feature, wrapping all the non-protected properties into a css:{} object in the vars (protected ones are things like onComplete, overwrite, etc.). If you set autoCSS:false on your first tween, it seems to resolve things too. I wonder if Vue is somehow swapping things out from underneath GSAP. Very odd indeed.
    1 point
  20. Hey @hando, If it should be a simple animation ... https://codepen.io/mikeK/pen/eqVzRW Happy tweening ... Mikel
    1 point
  21. Vue's data system uses setters to detect changes, which is being triggered with this.timeline = new TimelineMax() in your mounted section because it's a different type than null. And you don't need reactivity for a timeline. Vue can't detect when you make changes to a timeline.
    1 point
  22. To have tweens run in parallel you need to insert them at the same point in time in the timeline. Where a tween is inserted into a timeline is controlled via the position parameter. You can read about this parameter in great detail in the TimelineLite.to() docs. The position parameter is used in many other methods like from(), staggerFrom(), staggerTo(), call() and more. In your example, you can have the second tween start at the same time as the first tween by adding it at a time of 0 like this .add(TweenMax.fromTo('#intro', .5, { backgroundPosition: "50% 0vh" }, { backgroundPosition: "50% 20vh" })) .add(TweenMax.to('#intro p.hint', .5, {autoAlpha: 0}), 0) this example shows you how to have two tweens start at a time of 0 AND where a label is placed var tl = new TimelineLite() tl.to("#redBox", 1, {x:550}) //add second tween at time of 0 seconds .to("#blueBox", 1, {rotation:360}, 0) //add a label called "end" at a time of 2 seconds .add("end", 2) // add two tweens at the "end" label .to("#redBox", 3, {scale:2, opacity:0}, "end") .to("#blueBox", 3, {scale:2, rotation:0, opacity:0}, "end") http://codepen.io/GreenSock/pen/youzL?editors=001
    1 point
  23. Great question. You can define an onComplete callback for each Draggable instance which will then be used by the ThrowProps tween. Same thing goes for onUpdate. Take a look at this codepen which shows the x/y of the dragged object while being dragged and thrown http://codepen.io/GreenSock/pen/42effab5f643e677919315af7e37a021
    1 point
×