Jump to content

Rodrigo last won the day on March 17 2019

Rodrigo had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Rodrigo

  1. First I'm not seeing any "wonkiness" at all, it looks ok to me. Perhaps you could elaborate a bit more on that. The only thing I see could create a conflict is that you're setting the opacity to 1 and then on the staggerFrom you're animating from opacity 0 to opacity 1, but opacity is 1 when the element is first rendered. In the set instance you're also adding a 3D perspective to the elements, perhaps that demands more from the GPU and that creates some sort of jerk in the animation. Perhaps you could try with animating words or lines to make it more fluid. Keep in mind that when you animate chars, there's a lot of DOM nodes being animated which can be a bit demanding. mySplitText = new SplitText("#quote", {type:"lines,words,chars"}), words = mySplitText.words, lines = mySplitText.lines; tl.staggerFrom(words, time, {vars}); tl.staggerFrom(lines, time, {vars}); Second, which browser and OS you're seeing this. On Win7, Chrome, Firefox, IE11 and Opera, it looks ok. Finally, please make it clear for me: you want to add more text after the animation is completed?, or you need to change the text of the element after the animation is completed?.
  2. Hi and welcome to the GreenSock forums. It would be great if you could provide a reduced live sample in codepen. Also if you need to use the nodes holding the text after the animations there are two things you could do. One is to reverse the split text, like that the element goes back to it's original state. Two use clearProps to remove all the inline styles applied by GSAP to the elements. Revert SplitText: http://greensock.com/docs/#/HTML5/Text/SplitText/revert/ var split = new SplitText("#yourID"); // revert split.revert(); Clear Props (almost at the end of the page): http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/ Hope that helps.
  3. Hi Guys, I finally isolated the points that needed to be moved in order to keep the shape as neat as possible. I've updated the codepen: http://codepen.io/rhernando/pen/EyQAad Thanks to both for your support and help, you're the best!!! Rodrigo.
  4. Hi, Perhaps this codepen by Craig might help you get started: http://codepen.io/PointC/pen/KzmXYK I'm sure Craig will take a look at the forums later and He'll have lot's more to add to this. Unfortunately SVG is not my strongest point so besides the link I can't do more for you.
  5. You have to figure how to trigger the concurrent animations based on a specific point in the document. Basically you need to create two instances, one for the circle and one for the paragraph, obviously the circle one has to be longer, because once the paragraph appears, the user will scroll down and the circle has to continue it's drawing. Something like this: Paragraph-1 |-------------------------| Circle-1 End of the paragraph |---------------------------------------------------------------------| That could be translated into this: var tl = new TimelineLite(); tl .to(circle, 10, {vars}) .to(paragraph, 2, {vars},0); // the 0 at the ends tells GSAP to put this instance at the start of the timeline Take a look at this post in the blog to know how timelines work: http://greensock.com/sequence-video Also check at this video to know how to use the position parameter: http://greensock.com/position-parameter Unfortunately I don't have time to create a demo now, so hopefully this will help get you on your way.
  6. I see the confusion. The thing is that the TweenMax file includes, by design, the following: TweenLite, TweenMax, TimelineLite, TimelineMax, CSS Plugin, Ease Pack, Bezier Plugin, Directional Rotation Plugin, RoundProps Plugin and the AttrPlugin. There has been in the past questions and requests regarding this issue and, to be completely honest with you, I'll be in favor of a way of creating your own bundle (like jQuery does with the NPM package) so one can choose what to include for specific case use. But again the TweenMax.min file is just 33~ KB compressed and being objective that's not too much weight. Also it is worth noticing that the code of the TweenMax file is open source, so you can change it if you wish, but at that stage you're on your own. The forums are intended to provide support for the files provided by the download, NPM package, Bower and Git repository download/fork. We can't support issues derived from users changing the core files. Hopefully you understand that is not because we don't want to help users. This community is, and I know I speak for the Carl, Jack, the moderation team and other users that go the extra mile to give support, all about helping the users and going the extra mile while we're at it, but for time limitations we need to draw a proverbial line at some point. I invite you to keep discussing this and any other concerns and ideas you might have and I can assure you, that you'll always find a good willing answer. Happy Tweening!!
  7. Hi, The error you're getting is specific from ScrollMagic: Uncaught TypeError: (intermediate value).setPin(...).setTween is not a function Basically you can't use setTween() after setPin(): var pinBoxScene = new ScrollMagic.Scene ({ triggerElement: "#section_2", // point of execution triggerHook: 'onLeave', reverse: true, duration: "100%" //pin the element for a total duration of 4000px }) .setPin("#section_2") //pin red box .setTween(circle_tween) .addTo(controller); As I mentioned before I don't know a bit about SM, so perhaps you could look in the repository issue and perhaps start a new issue there: https://github.com/janpaepke/ScrollMagic/issues Also you could look at this sample for drawing SVG. Is not the same as you're after but it could help: http://scrollmagic.io/examples/advanced/svg_drawing.html
  8. HI supermoos, The issue is that you're not including the CSS Plugin as well. In a previous post you included this snippet; var timeline = new TimelineMax(); var valueProxy = {x: 0}; timeline.to(valueProxy, 1, {x: 100}); timeline.to(valueProxy, 1, {x: 0, yoyo: true, repeat: -1, onUpdate: ()=> { console.log(valueProxy.x); }}); Since you're using just an object, the core of the engine updates the value as expected. But in your latest snippet you're telling GSAP to animate CSS properties, which without the CSS Plugin can't be done. You should include the CSS Plugin import CSSPlugin from 'gsap/plugins/CSSPlugin'; If that's the route you have in your modules to the CSS Plugin.
  9. Hi, I saw your sample and I believe that the best option would be to use invalidate() and clearProps to clear the initialisation data for the GSAP instance and the inline styles added by GSAP, in order to return the object to it's original starting position. When you create an instance GSAP records the start and ending values for the object's properties and then iterates between them, thus avoiding layout trashing (constant and expensive read/write operations on every tick). When you create a new instance on an object that's already being animated and that affects the same properties, GSAP the overwrite manager comes into play and a new instance is created, using as starting values the current ones. If you don't remove the values already applied the new starting values will seem odd, as you're experiencing. When you use clearProps, the only values are the ones given by the original CSS styles or attributes and not those applied by GSAP. Here's how I'd do it: Pause the current instance and record it's progress. Create a new instance. This kills the current instance. Use clearProps on the element. Create a new instance and set it's progress to the previous one. Here are some samples using the bezier plugin, but the principle is the same: http://codepen.io/rhernando/pen/rarBrK http://codepen.io/rhernando/pen/ZYjYjO http://codepen.io/GreenSock/pen/xbJKWQ
  10. Hi and welcome to the GreenSock forums. The way I'll do it is to create a timeline, add the elements to the DOM and after add the GSAP instances to the timeline and finally when all the elements are added play the timeline. Also you could make a function to create the animations and call that function after all the elements are added to the DOM. This is a very simple example, but hopefully is enough to get you started: http://codepen.io/rhernando/pen/BzAYao
  11. To add to Craig's answer, Petr is also a moderator here in the forums, so He can definitely chip in with an advice. Also since srcollmagic is dependant on the scroll position you can increase the scroll amount for each circle and create a controller for each circle instead of a timeline for all of them. Now since the sample provided is based on the length of the each article, there's not much that can be done if that's what you have in mind.
  12. Rodrigo

    React and GSAP

    Hi Steven and welcome to the GreenSock forums. Thanks for the input and I agree with you in both, the way of animating DOM nodes with react and how to avoid conflicts with the components properties such as state and props, and if anyone finds in the scenario to modify a state property using GSAP, the engine has a very powerful set of callbacks to update using the setState() method. Also I haven't found a sample or snippet that has a component with a CSS based property in the state object so, as Jack mentioned in another post, I don't see how GSAP could break a React app.
  13. Hi, You're welcome. Honestly I don't know. I've never worked with ScrollMagic. Don't get me wrong, the plugin is great and you can create awesome things with it, I just prefer to create my own solutions for this cases. Because of that I couldn't tell you a better way of doing this with ScrollMagic, but creating a single timeline and let the plugin handle it's progress based on the scroll position, seems like the best approach to me. Perhaps you could look in the plugin's docs and issues to see if there's a better way to do it. Unfortunately we have to use our time in GSAP related issues and as much as we enjoy helping users, we can't support third party plugins that work on top of GSAP. You could try the repository's issues page: https://github.com/janpaepke/ScrollMagic/issues Happy Tweening!!
  14. Hi, Well, what I see is that there's nothing triggering the animation event. Check this Plunk by Blake: https://plnkr.co/edit/midHzP?p=preview Blake is adding the click event to the app: <html ng-app="app" ng-click="moveBall($event)"> Also this video by egghead is very useful to get started with Angular and GSAP: https://egghead.io/lessons/angularjs-animating-with-javascript Happy Tweening!!
  15. Hi and welcome to the GreenSock forums. The issue is that all your paths have the same id: <!-- CIRCLE 1 --> <path id="dot" style="stroke-linecap: round; ...></path> <!-- CIRCLE 2 --> <path id="dot" style="stroke-linecap: round; ...></path> <!-- CIRCLE 3 --> <path id="dot" style="stroke-linecap: round; ...></path> Then on your JS you have this: // this variable has all the elements with an id of "dot" var $dot = $("path#dot"); var $circle_1 = $("#circle_1"); var $circle_2 = $("#circle_2"); var $circle_3 = $("#circle_3"); var circle_tween = new TimelineMax() .to($dot, 4, { strokeDashoffset: 0, ease:Linear.easeNone}) .to('#circle_1', 10, {strokeDashoffset: 0,ease:Linear.easeNone}) .to('#circle_2', 10, {strokeDashoffset: 0, ease:Linear.easeNone}) .to('#circle_3', 10, {strokeDashoffset: 0, ease:Linear.easeNone}) .to("path", 1, {stroke:"#ffffff",ease:Linear.easeNone}); So basically all your paths with the dot ID are animating at the same time. You should give every path a different ID, like you're doing with the circles and then create an individual tween for each one.
  16. Hi, Unfortunately your codepen froze my browser so I had to close the tab before I was able to look at your code. Here are several samples of particle animations that should help you : http://codepen.io/GreenSock/pen/zrmiG http://codepen.io/GreenSock/pen/hCElc http://codepen.io/jamiejefferson/pen/rJtjw/ http://codepen.io/osublake/pen/wMwZoW Also Blake has some other particle animations samples created with PIXI but I couldn't find them, hopefully He'll come around this thread and share the links
  17. Hi, Perhaps you could use the new Modifiers Plugin to solve this. Check this video Carl made, there's a specific solution for this scenario: https://youtu.be/mIWf8cYLGOw?t=2m16s
  18. Yep, Blake's solution is pretty solid and avoids a lot of code in the process.
  19. Hey Blake, Thanks for pointing that post. That's pretty much the idea I was commenting to Dipscom, just move the points and keep the control points static, is not the best solution but it could work, considering the regular pattern and the fact that while creating the path in illustrator I kept the anchors to a minimum to reduce the amount of SVG code. That's the only tricky part, the top part stays put and the paths at the bottom are just moved a fixed amount of pixels. In fact looking at it in illustrator, when I move the anchor points the distance between the anchor and the curves control points is always the same, so basically I have to increase all the values for a specific part of the path by the same amount in the y axis and then create the new path. As I move forward I'll keep posting. Thanks again guys!!
  20. Hi, Sure you can. Since version 1.18.3 complex strings are possible for this type of properties. Check this codepen: http://codepen.io/rhernando/pen/oAIan/ The old way of doing it is commented out and just below is the new way. Unfortunately you can't target each background separately, since you're animating a property of one element. Turns out that if you change the values the overwrite manager will cancel the current animation and start a new one, that's why in the sample all values are kept between each instance. Here's the original CSS: background-position: 100px 100px, 300px 200px, 500px 0px; Here's the timeline: tl .to(div1, 5, {backgroundPosition:"100px 100px, 300px 200px, 0px 0px", ease:Linear.easeNone}) .to(div1, 2.5, {backgroundPosition:"0px 0px, 300px 200px, 0px 0px", ease:Linear.easeNone}, 2.5) .to(div1, 1, {backgroundPosition:"0px 0px, 100px 0px, 0px 0px", ease:Linear.easeNone}, 4); The first instance moves the third background to zero-zero. The second moves the first background to zero-zero and the value for the third is the same, otherwise the overwrite manager creates a new instance to the new values cancelling the previous instance. Finally the third instance moves the second background to 100-zero and the values of the other two backgrounds are the same. If you need something different, then you'll have to stick with the old solution. Happy Tweening!!
  21. Wow, that's freaking awesome!!! I didn't knew you could have svg tags within svg tags , and the solution is incredibly simple. Yep, that definitely solves it. One solution that came to me was to move just the anchor points and keep the curves' control points intact, sure it would definitely distort things a bit, but I'll give it a shot and report back. But for now I'm going with your solution. Thanks a lot!!! PS: By being on the other side of a question, this showed me what a fantastic community we have here
  22. Hi Dipscom, Thanks for the quick answer, but I'm not sure how scaling can be totally useful. The structure of this is the image you see in the post and a text area. The frame and the text container have an initial size (in the case of the text container let's call it naturalHeight). The user inputs a new text, the text container (SVG text) is updated with the new text and I get the new height of the text container and if it's bigger than naturalHeight then everything has to grow by that amount of pixels. Since scaling is proportional and not dependant on a pixel amount I don't know if it will fit correctly. Also the idea (as usual) is to make the whole thing responsive and as friendly as possible in terms of code. Finally SVG is far from being my strongest point, in fact this is my first time working with the Morph SVG Plugin. I've used Draw SVG for some preloaders and logo animations, but that's all I have in terms of SVG experience. So if what you suggest works and I can make it responsive without too much hustle, then I'll be more than thankful. I'll be waiting for the concept.
  23. Hi I need some help from the forums' SVG savants, I'm using DrawSVG and MorphSVG to create a couple of animations, but I'm hitting a wall regarding the Morph SVG part of it. I draw a simple path and then animate the fill. The idea is to create a frame with some dynamic text inside, like this: Here's the pickle. Since the text is dynamic the frames on the has to be changed according to the height of the text container inside. For that I'll use MorphSVG, but I need to translate the points of these paths by a specific amount of pixels, which changes the entire scheme of the paths, ie, changes not only the points' positions but also the control points of the bezier curves as well. I using pathDataToBezier() I can get the paths and offset the points by a specific amount, but how can I get this bezier with the new array of points and turn it back to an SVG path that I can use in the MorphSVG Plugin?, like in the codepen sample. PS: Is really odd to be on the other side of a thread
  24. Hi and welcome to the GreenSock forums. Unfortunately I haven't used GSAP with CommonJS/ES6, only ES5 through Browserify and NodeJS, but (and please correct me if I'm wrong) as far as I know importing modules in ES6 work in a similar fashion. Also you report that importing the TweenMax class is working for you. Question, are you able to create animations using the constructor?: TweenMax.to(el, 1, {x:100, y:100}); Finally in order to import the easing functions, they are already present in the TweenMax file. Check the first paragraph in the docs: http://greensock.com/docs/#/HTML5/Animation/TweenMax/ Hope this helps.
  25. Hi, What you're seeing is expected behaviour. Turns out that you have your code. The browser reads and interprets the code in a matter of milliseconds. So when you create the timeline is paused. Then you add instances to it and at the end the reverse method. Finally you call the play method on the timeline; at that point the timeline it's actively running, but it's reversed status is true, so it's going backwards. Turns out that it's at zero seconds, so is just stuck there. Basically in JS when you use the parenthesis in a function or method is called immediately, like this: function myFunc(){ console.log("Hi!!"); } var btn1 = $("#btn1"); btn1.on("click",function(){ myFunc(); }); The function will be called immediately after the code is read, not when the button is clicked. That's basically what's happening here. A way around is to add a call method at the end of the timeline, but if you need to reverse the timeline after is completed, I don't see the need for it, as an onComplete callback is enough. Also you should add the onComplete in the timeline constructor: var tl = new TimelineLite({paused:true, onComplete:myFunc}); Finally, you can use the call method as I mentioned above: main.set("#quote", {perspective:400})) .set('svg', {x: 320, y: 50})); .staggerFromTo(lines, 0.20, { drawSVG: '0' }, { drawSVG: '0 100%', 'visibility': 'visible', ease: Expo.easeOut }, 0.2) .staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut}, "-=4", "+=0") .fromTo('svg', 0.2, {scale: 1.0}, {scale: 1.5, ease: Power4.easeInOut, force3D:false}, 3) // call backOut after the timeline is completed .call(backOut); function backOut() { main.reverse(); } Call Method http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/call/