Rodrigo
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Rodrigo
-
Hi and welcome to the Greensock forums. For that particular effect I have no answer, basically because of the curve you see in the element, perhaps you could achieve something like that with Canvas or SVG, but I'm not sure, perhaps another user with more experience could give an insight. What I know you could do is reduce the element using scaling or width and height, similar to minimizing a window before these neat effects by Mac OS. For example windows still uses a more simple approach to the minimize effect with alpha and scale. Here's a very simple codepen showing a windows' similar minimize effect: http://codepen.io/rhernando/pen/GDwob Rodrigo.
-
Sure thing, a letter inside a div element should do it. Now I would recommend you using SplitText, it'll save you a lot of time and you can participate in the Splittext contest and maybe win a Club Greensock membership, see more here: http://www.greensock.com/splittext/ Keep in mind that the bezier animation in the sample uses x and y transforms instead of top and left, therefore the document's flow is not affected. I created a simple codepen, feel free to fork it, perhaps if you use it as a starting point using the SplitText tool and get something cool going you could win the contest : http://codepen.io/rhernando/pen/wdbLx Rodrigo.
-
Hi Jonathan, Since usually JS execution is not the biggest issue in terms of performance, It shouldn't be a big difference, but if we're talking about an insane amount of code, I'll say over 5000 lines, maybe there it could be a slight difference in favour of including the JQuery selector in the code instead of letting GSAP doing it for you, it reduces the amount of checks the library has to do while processing the code. I'm pretty sure that Carl and Jack did some stress tests in this matter when they included the feature, and I'm also very sure that if they see anything that would be detrimental in terms of performance it wouldn't be in the engine. Bottom line creating the selectors and even better, store the selectors in variables (specially when you animate or reference an element a lot in your code) is faster but it would be very difficult to notice in a real life working app. In my case I always pass the selectors myself and always include the tag (when working with JQuery), like this: var element = $("div#divID"); TweenLite.to(element, time, {vars}); Once I read that in some cases (again we're talking about a lot of nodes in your app) it can speed up things to add the type of tag you're refering (div, ul, li, p, span, a, img, etc), but I'm used to work like that now so I always type my code like that. Best, Rodrigo.
- 4 replies
-
- 3
-
-
- getelementbyid
- target
- (and 2 more)
-
Hi, Perhaps something like this, but instead of going from one bezier to another, you could use a from instance, like that the text will be rendered in the bezier and then go to the flat inline text: http://codepen.io/rhernando/pen/Aydqu Rodrigo.
-
Hi, There are some syntax issues with your codepen. First you're not including all the libraries (you need a pro account to do that but if my memory doesn't fails it seems there are some workarounds for it). Even if you include the code's you need a version of scrollorama that is not hosted in GitHub (means that you have to upload one to a server and point to that file). One alternative is JSFiddle which allows multiple libraries in the free version. Second, in order to animate positioning properties (top-left-bottom-right), the element must have a position defined (relative, absolute, fixed). In this matter I'd recommend you to always workk with left and top, since right and bottom give issues in some browsers and are more difficult to work with in some scenarios. Finally in this code playground type of sites the <script>, <body>, <head> and other tags are not required you can write your code without them since the result is added in an iframe, which includes all of them. I set up a simple example in JSFiddle: http://fiddle.jshell.net/4chsh/2/ Note that I've uploaded a version of superscrollorama to my server, please use it only for that sample and try to upload one of your own to a server used by you as soon as you can. Also here's a link to the same version that you can use in your local enviroment: https://drive.google.com/file/d/0B-0o-ayjhl3nYVpWbzZwSHA3MGc/edit?usp=sharing Rodrigo.
- 11 replies
-
- 2
-
-
- aniamtion
- left to right
- (and 1 more)
-
Hi, Actually in terms of animating an element upon scrolling the page or any element with overflow, superscrollorama is the easiest way to do it. You should start by the basics of using the plugin and then go further in terms of complexity. They also offer direct support in their GitHub repository. The "manual way" of animating stuff based on the scroll event that I know is the following: http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/ As you can see is not incredibly simple nor complex, but that way offers less possibilities than superscrollorama and you have to set up everything by hand. One thing that you could do is use the scrollTo plugin to scroll the document to a certain position and using callbacks you could start the elements animations when the scroll is completed or during the scroll. Also as Jonathan said it is a very good practice to post a link to a fiddle or codepen in order to get a better idea of what you're trying to achieve. Rodrigo.
- 11 replies
-
- 2
-
-
- aniamtion
- left to right
- (and 1 more)
-
Hi, You're welcome. It's always great to receive this type of feedback from users, it's a good recognition of the hard work every one in the community does. In terms of the issue you're having in chrome I believe that it has to do with the amount of nodes being passed to the engine and being animated, thus creating quite a handful to chrome. Is what Carl and Jack always call "a rendering bottleneck" or the three stooges syndrome, too many things trying to pass through a single door and blocking each other. I noticed that every single element you're trying to stagger is contained in a master <g> tag, what you could do is assign a common class to those tags and you could use either JQuery, sizzle, zepto or another library with selecting capacities, so select all of them and then create the staggerFrom() instance. Rodrigo.
-
Hi, Yet another possibility is using modernizr to detect the browser's support for certain properties, 3D transforms in this case, and based on that test create the tweens or load the script according to the browser. First include modernizr between the head tags in your document, best thing is to do it before every other script: <script src="scripts/modernizr.js"></script> Then you have two options, first you can create the tweens depending on test result: Modernizr.load( { test: Modernizr.csstransforms3d, yep : function() { //create tweens that for 3D support }, nope: function() { //create tweens for browser that doesn't support 3D transforms } }); The second option, which is the one I'd recommend you, is to create separate js files and load them as a result of the test: Modernizr.load( { test: Modernizr.csstransforms3d, yep : 'scripts/site.script.3d.support.js', nope: 'scripts/site.script.NO.3d.support.js' }); Why I recommend this option because is quite usual that any site or app will have more than one animation, therefore the amount of code will be more than a couple of lines, like this you don't force users with modern browsers to load the code for other browsers, also helps you modularize your codes (which in some scenarios is a very good idea) and you'll learn more about how to use both modernizr and yepnope (a conditional loader included in modernizr) which are great libraries. The direct link to modernizr with the 3D support detection is the following: http://modernizr.com/download/#-csstransforms3d-teststyles-testprop-testallprops-prefixes-domprefixes-load Go to the bottom of the page and copy the code in the box, it weights a little more than 6 kb, and if you can GZIP it it goes down to 3 kb so it loads and executes very fast. Also as you can see there are quite a handful of things you can do with both libraries so give them a try and I can assure you that you'll love them. Rodrigo.
-
Hi, Sorry I didn't catch that but there's a lot of code in your app and I didn't read it carefully. It's strange though that you're experiencing problems with percentages, keep in mind that percentages must be passed as strings: //absolute values TweenLite.to(element, time, {left:"50%", top:"50%"}); //relative values TweenLite.to(element, time, {left:"+=50%", top:"+=50%"}); But looking at your code you're using percentages for your site map indicator. The problem is that when you resize the window you're not resizing the indicator, causing the issue of the white rectangle being kind of "out of place" when you click the arrows. If you resize the indicator proportionally to the screen size everything should work as expected. Rodrigo.
-
Hi Erik, Actually I've never used TweenUI before and let me say that is a very solid tool, it'll be very helpful for those users with no coding experience. I loved the way you can add the easing functions to each tween. What would be great is a better control of each tween's time, perhaps the instance's duration via input, but besides that is a great tool, good job!!. Best, Rodrigo.
-
Hi Anthony, Actually Carl included TweenMax.min.js which includes, among others, the CSS Plugin, Ease Pack, and Bezier Plugin, so that's why it made no difference when you included the Ease Pack. In terms of avoiding the clear method, what you could do is create different papers and animate each shape in a separate canvas, that also will help you to chain the animations, just create a master timeline and nest child timelines that could handle each drawing and some other animations (if they're required). Best, Rodrigo.
-
Hi, What you could try is use the scrollTo plugin for all the animations and put on the top-left corner of every section a dummy element, so you can scroll the canvas to the specific position of that dummy element, like that on resize you'll get the new position using JQuery's offset property: var dummyEl1 = $("#dummySection1"),//create a dummy for every section dummyEl1Pos = dummyEl1.offset(); //this goes on the click event. I'm just assuming a btn1 ID $("#btn1").on('click', function() { TweenLite.to(scrollsrc, 1.5, {scrollTo:{x:dummyEl1Pos.left, y:dummyEl1Pos.top} }); }); You just have to be careful to adjust the offset variables on the resize event. Here you can see JQuery's api docs on the resize event: http://api.jquery.com/resize/ Best, Rodrigo.
-
Ahh yes. You can't put a class over an ID, classes are more specific than IDs. This is just a specification rule and has nothing to do with GSAP. The only way is to change the element's inline style, just what GSAP does, but that means doing it through the usual way via the constructor: TweenLite.to("#start", 1, {width:100, height:100, backgroundColor:green}); The only way I know is adding !important in the stylesheet, but that will render the new style immediately, so you won't get the gradual change. Another chance is to work with classes and use the ID just for selecting purposes. Best, Rodrigo.
-
Yep Jack is right, I totally forgot that Carl created a great sample of smoothly decelerate a tween, you can check it here: http://codepen.io/GreenSock/pen/LuIJj Rodrigo.
-
Hi, I haven't looked with detail the code of the className var and how it works but if you create a local sample and use dev tools or firebug you'll see that there are changes in the element's inline style, but when the tween is completed they are removed, here's what I think is going on, the engine detects the className property in the instance's vars, then it looks for that style in the document's style declaration, get the style's values and does what always does in order to animate between the current values and the final ones. When the tween ins completed, since the change was made with className the engine applies a clearProps to all the properties that were animated, therefore it seems like the styles were replaced instead of overwritten. Of course Carl or Jack could give us a more detailed explanation. Also I don't see any difference between your codepens, the code is the same so there's no difference in the behaviour of both samples, and keep in mind that is rather difficult to use dev tools or firebug on codepen. Best, Rodrigo.
-
Hi, Yep, the thing is that CSS transforms don't affect the document's flow so if you change the x value the left value remains unchanged and vice versa. Also I neglect to remember the fact that you could use force3D:true in order to improve performance without changing the rest of your code: defineOpenCloseAnimation: function() { var e = this, n = e.$el.width(); e.openCloseAnimation = TweenMax.fromTo(e.$el, .500, { left: -1 * n, force3D:true }, { left: 0, paused: !0, ease: Quart.easeOut }), $body = $("body"), e.openCloseBodyAnimation = TweenMax.fromTo($body, 0.8, { left: 0, ease: Quint.easeInOut, force3D:true }, { left: n, paused: !0, ease: Quart.easeInOut }) } Give that code a shot and let us know how it went. Rodrigo.
-
Hi, I'm still working on flash CS4, it's been unnecessary to do the upgrade so I couldn't look at your file. But since you've been using the engine one of the great things the guys did was to keep the syntax and constructor of the instances in the same way, so the only changes between AS and JS are the particular things of each language. In this case if you need to start an element's animation after the previous one ended, you could set up a timeline in the for loop: var childs = parent.children, tl = new TimelineLite({paused:true}); for(var i = 0; i < childs.length; i++) { tl.to(childs[i], time, {vars}); } tl.play(); That should work. Keep in mind that for moving things around your element should be positioned (fixed, relative or absolute) and if you're using the same loop to apply the css styles and create the timeline you should be very careful in the order on which the code is executed: var parent = document.getElementById('parent'), childs = parent.children, styles = document.createElement('style'), tl = new TimelineLite({paused:true}); styles.type = 'text/css'; for(var i = 0; i < childs.length; i++) { //first execute the styling var styleNode = document.createTextNode('#' + childs[i].id + '{ position:absolute; }'); styles.appendChild(styleNode); //then create the tween instance in the timeline tl.to(childs[i], time, {vars}); } //apply the styles to the elemenets document.getElementsByTagName('head')[0].appendChild(styles); //finally play the timeline tl.play(); Also if you're familiar with the engine you could use a staggerTo() method directly on the var containing all the elements, you just have to play with the stagger time value in order to get the desired separation between each animation: var parent = document.getElementById('parent'), childs = parent.children, styles = document.createElement('style'); styles.type = 'text/css'; for(var i = 0; i < childs.length; i++) { var styleNode = document.createTextNode('#' + childs[i].id + '{ position:absolute; }'); styles.appendChild(styleNode); } document.getElementsByTagName('head')[0].appendChild(styles); //create the tween instance after the loop TweenMax.staggerTo(childs, time, {vars}, staggerTime); Best, Rodrigo.
-
Hi, I remember doing something like this for a carousel, where the rotation speed will depend on how far from the middle of the screen you are, tweening the timeScale property of the instance controlling the rotation. In this case is the same but with the scroll position, which gets super simplified by the engine's scrollTo plugin. I'll have to search that sample and then convert it to your needs. Unfortunately I'm spending very little time working in any development this past few weeks (whether is paid or support for the forums) so I can't tell you when I could set up something to illustrate the point, I hope I can get something done during the weekend, since I've already done something similar it shouldn't take that much time. Rodrigo.
-
Hi, It's very simple just replace "left" with "x", like this: defineOpenCloseAnimation: function() { var e = this, n = e.$el.width(); e.openCloseAnimation = TweenMax.fromTo(e.$el, .500, { x: -1 * n }, { x: 0, paused: !0, ease: Quart.easeOut }), $body = $("body"), e.openCloseBodyAnimation = TweenMax.fromTo($body, 0.8, { x: 0, ease: Quint.easeInOut }, { x: n, paused: !0, ease: Quart.easeInOut }) } That should do it. Keep in mind though that x and y work independently of the element's position on the first render, so if the element's initial left is 200px the x value is zero. Also tweening those values doesn't affect document flow. Rodrigo.
-
Hi Chris and welcome to the Greensock forums. Yes, one of the most amazing features of the engine is that you can tween any numeric value of any object. Since a Tween/Timeline instance is an object and the time is a numeric value you can tween it using ThrowProps. var tl = new TimelineLite(); tl.to(element, time, {vars}); TweenLite.to(tl, time, {ThrowProps: { time:value } }); I've set up a simple codepen showing how you can do it: http://codepen.io/rhernando/pen/utGCk As you can see when you use the ThrowProps plugin you set a certain time, but because of the inertia behaviour of the plugin the final time is bigger than the original time. Also keep in mind that every tween/timeline instance has other numeric properties such timeScale and progress, so you can also tween those. As well in this case the ThrowProps is a tween instance as well, so you could tween the progress, of the instance that tweens the time of another instance.... mind-bending right? Rodrigo.
-
Hi and welcome to the Greensock forums. I'm not very sure if this is what you need, but one possibility would be to add all the SVG paths into one div (ideally add nothing else into that div element) and store all the elements into a variable. Then loop through that, apply the specific styles and add them to a style sheet in the document. HTML <div id="parent"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="path1"> <path d="M150 0 L75 200 L225 200 Z" /> </svg> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" id="path2"> <rect x="100" y="50" width="400" height="250" style="fill:blue;"/> </svg> </div> JS var parent = document.getElementById('parent'), childs = parent.children, styles = document.createElement('style'); styles.type = 'text/css'; for(var i = 0; i < childs.length; i++) { var styleNode = document.createTextNode('#' + childs[i].id + '{ position:absolute; }'); styles.appendChild(styleNode); } document.getElementsByTagName('head')[0].appendChild(styles); The example is quite simple, just a triangle and a square, but with that you can add the specific styles for each path into the stylesheet. Now if I'm not mistaken (perhaps a more experienced user with SVG could clarify this for us) that if you're going the way I propose you might as well just declare the specific styles by hand, at the end it would be the same and your code wouldn't get so bloated with unnecessary stuff like setting the styles, unless you're importing your svg paths through XML or JSON data, in which case such implementation would be necessary. Rodrigo.
-
Hi Anthony, What you need is force3D:true. What that does basically is put the content being animated in a GPU layer , pretty much like adding a tiny amount of translate on the z axis. I'm not a connoisseur of CSS animations/transforms but perhaps the reason is that you were adding a translateZ:0, which basically doesn't move the element at all and ultimately won't pass it to the GPU. Now the only caveat with the force3D is that if you pass too many elements to the GPU will ultimately create too much workload on the GPU and create performance issues. $('.test-gsap').on({ mouseenter: function() { TweenLite.to($(this), 0.5, { scale: 1, ease: Quad.easeIn, force3D:true }); }, mouseleave: function() { TweenLite.to($(this), 0.5, { scale: .95, ease: Quad.easeIn }); } }); Rodrigo. PS: well, there you go 3 answers for the price of one. PS2: Shouldn't you be celebrating Thanksgiving with your families ?
-
Hi Mike, The bezier plugin does support cubic bezier, take a look at tje API reference: http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html Rodrigo.
-
Hi, I set up a very simple codepen. It was made with buttons and not the li elements, but is the concept of the child elements being rotated what matters. The CSS for using li instead of buttons is pretty standard stuff and you've already got that working. http://codepen.io/rhernando/pen/qjIEn Of course it still needs some tweaking regarding specific events, for example if the user clicks on another tab while the previous is animating, you get a pretty ugly behaviour, but that can be sorted out easily. Best, Rodrigo.
-
Hi and welcome to the Greensock forums. Any particular reason to rotate the parent and not the child element?. If you check this codepen you'll see that rotating the child element has the desired effect in IE10: http://codepen.io/rhernando/pen/vjGxH Also keep in mind that preserve 3D is not supported in IE10 and it won't be supported in IE11 either. Perhaps in IE12 or maybe in IE199 , but definitely not in the short term. That's why in the link's sample every child is rotated, so it can work on IE10-11. Rodrigo.
