Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 03/03/2019 in Posts

  1. hi @Emilek1337, Here is a fork of your pen showing how to tween text outside of a div, but let the div mask anything outside. I've made a few notes within the pen to show you what I changed. Hope this helps!
    2 points
  2. Happy to help, @Emilek1337 !
    1 point
  3. I don't quite understand what you're trying to do, but I definitely know why you're getting that error. You're calling add() on a TimelineMax and feeding in an array of null values because your slide() method doesn't return anything. In other words: var test = slide(...); //<-- this doesn't return anything! console.log(test); //null Therefore, this: TLentries.add([ slide(boxArray[0], boxArray[1], boxArray[2], boxArray[3], 0) ]); Is basically like doing this: TLentries.add([null]); Hence the error. It doesn't work to add null to a timeline If I knew what you were trying to accomplish, I might be able to offer a solution. I don't really understand why you're even using multiple timelines or maybe you're trying to nest things(?) But right now you're putting everything into the TLentry timeline anyway, so TLentries serves absolutely no purpose (other than to throw errors because you're adding null values to it).
    1 point
  4. Try this: TweenMax.from(".disc2", .2, {left:"200px"}) TweenMax.from(".disc3", .3, {right:"150px", delay: 2}) Or use a timeline: var tl = new TimelineMax(); tl.from(".disc2", .2, {left:"200px"}) .from(".disc3", .3, {right:"150px"}, 2) Also note that with timelines, you can actually use relative values to more easily animate things sequentially: https://greensock.com/position-parameter So instead of the 2 at the end, you could have "+=1.8".
    1 point
  5. That is a really good news for me, thanks! To be clear, almost every implementation of timeline I use has an initial stop because depends of the loading of other content such audio or svg via AJAX. This change will help my work a lot!
    1 point
  6. In 2.1.0, we changed the default immediateRender for **paused** TimelineLite/Max from(), fromTo(), staggerFrom(), staggerFromTo() calls to be false because a few people considered it a "bug" to have a paused timeline render anything (including starting values). However, since releasing 2.1.0, it has come to our attention that the change made a bigger impact on our user base than anticipated and it was a pain point. It altered behavior, so we decided it's better to revert to the old default, and to introduce a change like this in a future major version update. My apologies for any confusion the 2.1.0 change caused anyone. 2.1.2 (just released) restores the old immediateRender defaults. And to be clear, this only ever affected timelines that were paused at the time the from()/fromTo()/staggerFrom()/staggerFromTo() calls were made. Does that clear things up?
    1 point
  7. Hi there! My name is Sarah, I'm on the Vue core team and do a lot of work with Vue and SVG animation using GSAP. Yep, you're on the right track, refs are the way to target these elements though technically it still works to target an id or class as usual. However, there are some key pieces in here that I want to separate out in case it's helpful to you, because really the sky's the limit! And they play so well together: 1) The way that animation and rendering work, you are *always* going to be touching the DOM in the case of animation, this can't only happen in the virtual DOM (something that people miss about React, too, even when looking at libraries like React-Motion) 2) There's a way to interpolate numbers that then update the DOM by transitioning state, and then there is accessing the DOM directly. You can use Vue and GSAP for both. I rewrote the docs example to use GSAP for our transitioning state example here: https://vuejs.org/v2/guide/transitioning-state.html#Animating-State-with-Watchers, but the way you're working with the DOM nodes and watchers, you may be more interested in this chart I wrote with where I'm spinning up SVG DOM nodes with directives, which is similar to what you're doing. In other words, you can use Vue and GSAP to interpolate number or values, and then apply that to a style binding, OR you can just update the fill in GSAP by targeting the element directly, that will still work. There is even a relative HSL tween that gsap offers if that's your jam 3) You might also want to set things up with a transition component, which offer some javascript hooks for beforeEnter, enter, and leaving states: (I have a bunch of pens that do this but this is probably the simplest Vue Book Content Typer) The nice thing that the transition component offers you is an ability to coordinate one thing entering and another leaving, with transition modes. They're pretty spectacular. You will also be given FLIP under the hood with the transition-group component. 4) You can also plug directly into the mounted lifecycle hook, as you can see here: Vue Weather Notifier Pen. This way you can activate an SVG animation on the component as soon as it's in the DOM. You can also see in this pen I'm changing opacity, using drawSVG, changing color, rotating, you name it- it's all possible on SVG elements and you don't *have* to put them in data. Though there's nothing wrong with transitioning state that way either. I also wrote this article that should help you: https://css-tricks.com/intro-to-vue-5-animations/ And have this open source repo which is a whole workshop just about vue and svg animations: https://github.com/sdras/animating-vue-workshop Please feel free to ask any questions as well. Thanks!
    1 point
×
×
  • Create New...