Jump to content
GreenSock

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

Rodrigo last won the day on March 17 2019

Rodrigo had the most liked content!

Rodrigo

Moderators
  • Posts

    1,768
  • Joined

  • Last visited

  • Days Won

    158

Everything posted by Rodrigo

  1. Hi Arek, The site is coming along really good, the graffic art is quite nice, great job!! As for the auto scroll I've developed some simple code that gets the job done, the only downside is that your elements need to have the same height or the same separation between them in order to work, a little more coding would be necessary in order to achieve something more flexible, but at least is a start. You can see it working here: http://codepen.io/rhernando/pen/bjLxe In this sample all elements have a 100% height which makes it very easy, but those could be used as containers for the different parts of a site. Hope this helps, Cheers, Rodrigo.
  2. Hi Gabriel, Try using immediateRender:false. The thing is that zero duration tweens and instances that use the set, from and fromTo methods, set the values assigned in the vars immediately, therefore once the tween is created, independently of the timeline particular sequence, your img element's visibility is set to visible. Your code could be like this: var tl = new TimelineMax() tl .to(text,3,{left:500}) .to(img,0,{visibility:'visible', immediateRender:false}) .from(img,3,{left:500}); Hope this helps, Cheers, Rodrigo
  3. Don't mention it, glad to help. The issue with the auto scroll function and firefox could be that you're tweening a css property of the body element, like this: TweenMax.to($('body'), 1, {scrollTop:0, ease:Quad.easeOut}); Why don't you try the engine's scrollTo plugin, is super easy to use and works amazing, take a look at the api: http://api.greensock.com/js/com/greensock/plugins/ScrollToPlugin.html With it the code of your auto scroll function would be like this: First you load the plugin like any other script: <script src="js/greensock/plugins/ScrollToPlugin.min.js"></script> And then you make the call: TweenMax.to(window, 1, {scrollTo:{y:$('#city').offset().top}, ease:Quad.easeOut}); //You can set your position like a variable too but both should work with no problem var cityTopPos = $("#city").offset().top; TweenMax.to(window, 1, {scrollTo:{y:cityTopPos, ease:Quad.easeOut}); Hope this helps, Cheers, Rodrigo.
  4. Nice job professor Schooff!! ;-) I'll be waiting for the next lesson, keep up the good job guys. Cheers, Rodrigo.
  5. Hi, Is working now, good job. But you have some vertical scrolling possibility which triggers the animation, that's' because the comic section height is 100% and has a 70px margin-top, that gives you 70 vertical pixels to drag. Cheers, Rodrigo.
  6. Hi, One possibility is the center.js code, particularly in this line: $(this).css({position:'absolute', margin:0, left: (left > 0 ? left : 0)+'px'}); If you check with developer tools or firebug that's causing for the div "#enviro" to change it's position from absolute at the beginning of the scroll to fixed and back to absolute when the opacity of the div "#flasz" reaches 1, maybe just remove the absolute part of it. Besides that I can't see anything else going wrong with it. Start with that and lets see what happens. As far as the auto scrolling you could take advantage of the engine, you don't need setTimeout. Create an object and an element with a 0 value, then create a tween inside the window scroll event that lasts 1 second (or the time you want to wait before the auto scroll to happen) and then put an onComplete callback that scrolls to a certain point based on the current scroll position. The good thing about it is that you can take advantage of the overwrite manager, because since you're going to trigger the tween every time you scroll and you're going to be tweening the same object and the same property the previous tween will be killed, something like this: var timeOutElement = {a:0}; $(window).scroll(function() { TweenMax.fromTo(timeOutElement, 1, {a:0},{a:1, ease:Linear.easeNone, onComplete:autoScroll}); //rest of the code }); function autoScroll() { //Here you put the code to scroll the window to the required point //You can use the scrollTo plugin } Like that when you scroll the element "a" of the object is going to be tweened from 0 to 1, and if there's another tween going on (meaning that less than 1 second has past since the last scroll event) is going to kill it, and when the tween completes is going to execute the autoScroll function. Hope this helps, Cheers, Rodrigo.
  7. Hi, I haven't used scrollorama, but it would help a lot if you could set up a live sample (fiddle or codepen) or upload a zip file with the isolated issue in order to take a look at it. The basic scrollorama syntax is the following: $(document).ready(function(){ //set the name of the superscrollorama elemenet var controller = $.superscrollorama({ isVertical: false }); //then you add the tweens controller.addTween(target, TweenMax.from(element, 1, {Vars}) ); }); Hope this helps, Cheers, Rodrigo.
  8. Hi, The site is quite cool and most definitely could be emulated with GSAP. As far as I know there are two options, the easiest one is using John Polacek's Superscrollorama, a JQuery plugin used to control tweens/timelines via scrolling. There are a lot of amazing sites using it, for more info check here: http://johnpolacek.github.io/superscrollorama/ John also offers support here: https://github.com/johnpolacek/superscrollorama The other choice is use a function I created some time ago, is very basic stuff and you have to take care of everything in terms of where your tweens/timelines start and end because is based only in scroll position and not time. You can see it and download the sample code here: http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/ For another sample you can see this site: http://theartofraw.g-star.com/ Hope this helps, Cheers, Rodrigo.
  9. Hi, According to my minimal knowledge in 3d transform matrix, the value you're modifying (0.01) in the matrix is the perspective projection in the Z axis, but your element is not inside one that has a perspective, therefore that value won't have an effect if any because is too small. A possibility would be to, instead doing it through the css you could do it through the engine, avoiding the vendor prefixes, like this: TweenMax.set($("#container"), {z:10}); I updated your fiddle but the problem remains, only in Chrome, works fine in firefox, IE9+, Safari 5, which led me to think that's basically a browser issue and not the engine. Unfortunately Chrome has some issues with animations, if you google for chrome and animation issues you're going to find that chrome has problems with CSS3 transitions, jquery animate(), other js libraries, canvas and svg animations. Here's the updated fiddle: http://jsfiddle.net/KvDEr/2/ Another update on the fiddle in order to pass the values directly through JQuery's css method on a tween update didn't work either, you can see it here: http://jsfiddle.net/KvDEr/3/ What does work is to create an independent tween for the radius with a delay of 1 second: TweenMax.to($("#container"), 1, {borderRadius:'100px', delay:1}); Of course this kills the beauty of the simultaneous tweens, but gets the job done. My thought is that this is mainly a chrome rendering issue and out of my capacities, maybe Jack or Carl could give us more light in this one. Well I hope this helps a little, Cheers, Rodrigo.
  10. Hi Rob and welcome to the forums. First thing would be to ask you which version of the engine you're using, because with the current version (1.9.4) it's working in IE9+, FF20, Chrome 26, Safari 5 and Opera 12. The code that's working for me is the following: CSS #div1{ background: rgb(30,87,153); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* W3C */ height:300px; width:300px; font-size:24px; color:#fff; font-weight:bold; } HTML <button id="btn1">Tween Background Position</button> <button id="btn2">Reset Background Position</button> <div id="div1"> Hide Ho Greensockerinos!! </div> JS $(document).ready(function(){ var div1 = $("div#div1"), btn1 = $("button#btn1"), btn2 = $("button#btn2"), tn1 = TweenMax.to(div1, 1, {backgroundPosition:'50px 50px', paused:true}); btn1.click(function() { tn1.play() }); btn2.click(function() { tn1.reverse(); }); }); You can see it working here: http://codepen.io/rhernando/pen/vfbiJ Also I've attached a sample file for local testing: An advice would be to avoid the progid:DXImageTransform filter for IE6 - IE8, because that breaks up the animation for IE9. Hope this helps, Cheers, Rodrigo.
  11. Hi, Turns out that your final though was quite on the mark. The thing is that animating div elements becomes quite a nightmare, because you have to tween a lot of different css properties (height, width, margins, etc.) which makes the animation quite jittery. But creating the elements independently and positioning them with a loop and then tween all at the same time makes the process more simpler. I tried two approaches starting with other thing I came up for circular rotation, first positioning the elements based on the points from a bezier tween of some objects. In the second way I setted the angles in the same way but every element is in the same position.The only downside in both approaches is that there's a lot of trial and error in setting each element's angle. After that just tween the height property and done. You can see them working here: Bezier positioning http://codepen.io/rhernando/pen/sxwoy Absolute positioning http://codepen.io/rhernando/pen/inDzv Finally the sun is created with a simple half circle created with canvas. Hope this helps, Cheers, Rodrigo.
  12. HI, I haven't played too much with the clipping part of the engine but you could create a clipping rectangle inside a div element with border-radius:50% 50% 0 0; One question though, are your sun rays DOM elements or is it an image?, if they are DOM elements you could use absolute positioning, rotation and scaling them down and then scale them up in order to complete the effect. Unfortunately you caught me without enough time so I can't set up a sample until tomorrow. Hope this helps, Cheers, Rodrigo.
  13. Hi, Keep in mind the fact that both, tweenTo() and tweenFromTo(), methods accept callbacks, so you can add an onComplete on your code to call the pause() function, like this: $("a.security").click(function(){ beneftisContent.tweenTo("label1", {onComplete:pause}); }) $("a.e-managment").click(function(){ beneftisContent.tweenTo("label2", {onComplete:pause}); }) $("a.convenience").click(function(){ beneftisContent.tweenTo("label3", {onComplete:pause}); }) For more info take a look at the api reference Hope this helps, Cheers, Rodrigo.
  14. Hi, Once I had in mind creating a fps to check how the created animations were working, for many resons I didn't even started but the few things that I had in mind was using the requestAnimationFrame method. One thing that you could use is the ticker property of the engine (api reference) in order to check how many times the engine is updating. To read more detailed info about it check the following posts: http://forums.greensock.com/topic/7598-overwritemanager-oncomplete-bug/?hl=ticker#entry28827 http://forums.greensock.com/topic/7499-animations-lag-when-chrome-has-multiple-tabs-open/?hl=ticker#entry28753 Jack explains with a little more detail how the ticker property works under the hood and maybe this can help you getting started. Hope this helps, Cheers, Rodrigo.
  15. Hi and welcome to the forums. Mainly your problem is that you're trying to tween a css property without including the css plugin. To solve this you can either load the plugin or use TweenMax (which among other goodies includes the css plugin). //Load the plugin as well as TweenLite <script type="text/javascript" src="/js/TweenLite.min.js"></script> <script type="text/javascript" src="/js/CSSPlugin.min.js"></script> //Load TweenMax <script type="text/javascript" src="/js/TweenMax.min.js"></script> And like that you're test should work fine. Hope this helps, Cheers, Rodrigo.
  16. Hi, You can do it by tweening the value of a created object and then passing that value using JQuery's css method, like this: $(document).ready(function(){ var par = $("p"), lHeight = par.css("line-height"), heightObj = {a:1}, btn1 = $("button#btn1"), btn2 = $("button#btn2"); btn1.click(function() { TweenMax.to(heightObj, 1, {a:'+=.5', onUpdate:lHeightChange}); }); btn2.click(function() { if(heightObj.a >= 1.1) { TweenMax.to(heightObj, 1, {a:'-=.5', onUpdate:lHeightChange}); } }); function lHeightChange() { par.css("line-height", heightObj.a); } }); You may notice that in the conditional logic I've use >=1.1, that's because sometimes the end value of a could be 1.00000000001 which is bigger than 1 and that'll cause the line going smaller than 1. You can see it working here: http://codepen.io/rhernando/pen/injvJ Hope this helps, Cheers, Rodrigo.
  17. Hi Fernando, It would be very helpful if you could provide a live sample (fiddle or codepen) of the part of your code that's behaving like this in order to take a look at it. Cheers, Rodrigo.
  18. Don't mention it, glad to help. One thing that I request is that if you could send me a PM when your site is done indicating me which animations are using the code I proposed, in order to indicate that in the blog as a working sample, is quite important that people see the code going in a real life sample. Cheers, Rodrigo.
  19. Hi, Well it is a recommended practice to pass elements just once and through variables and when you define those variables limit the amount of elements to go through, something like this: var element1 = $("div#element1"); Like that everytime you call for element1 it is already stored in a variable, and populating that variable is easier because you're giving detailed information of where to look for. Also there's a lot of images being animated in the site, mainly transparent PNGs, and maybe considering the fact that chrome puts quality over quantity in terms of rendering, could be causing some trouble. Also, and please don't take this as a personal thing because is just an observation, your code seems a little over complicated, is very well structured but one thing I would try i would be to simplify it as much as I can, maybe less arrays and more straightforward variables and functions. Finally, unfortunately you're dealing with a very singular issue here (it just happens on chrome and under very specific circumstances), it's like you sat right on the needle of the haystack and chromium hasnt come up with an answer and I'd love to give you a straight one that could solve this, because you're site is quite amazing. Like I told you I checked on chromium a couple of days ago and looked at the site again and one thing i can tell you is that is quite amazing. As soon as you have the new live site let us know in order to take a look, because the fiddle is just one element and doesn't involve the complexity of the real site. Cheers, Rodrigo.
  20. Hi and welcome to the forums, One way would be to rotate the element and scale it down with a TweenMax.set and then scale it back to 1, like this: var obliqBar = document.getElementById("progBar"), tl1 = new TimelineMax(); TweenMax.set(obliqBar, {rotation:25, scaleX:.001, transformOrigin:'0% 50%'}); tl1.to(obliqBar, 0.5, {scaleX:1}); I've updated your fiddle so you can see it working: http://jsfiddle.net/rhernando/6GJ67/3/ Hope this helps, Cheers, Rodrigo.
  21. Hi, Well this will depend on a few factors. If you're using JQuery or not and if you're animating css properties or not. The thing is that if you're animating a css property and you're using JQuery you can use an onUpdate call in order to get that property using JQuery's css method, like this: $(document).ready(function(){ var div1 = $("div#div1"), divLog1 = $("div#log1"); TweenMax.to(div1, 2, {top:400, left:400, onUpdate:updateFn}); function updateFn() { divLog1.html(div1.css("top") + ' // ' + div1.css("left")); } }); Now if you're not using JQuery you can store the value in a variable and using it when you need it, like this: var div1 = document.getElementById("div1"), div1Top, div1Left; TweenMax.to(div1, 2, {top:400, left:400, onUpdate:updateFn, onUpdateParams:['{self}']}); function updateFn(tween) { div1Top = tween.target.css.top; div1Left = tween.target.css.left; } And if you're not animating a css property, like x and y, but yuo're using JQuery, you can use something similar to the code above: $(document).ready(function(){ var div1 = $("div#div1"), divLog = $("div#log"), div1Top, div1Left; TweenMax.to(div1, 2, {y:400, x:400, onUpdate:updateFn, onUpdateParams:['{self}']}); function updateFn(tween) { divLog.html(tween.target.y + ' // ' + tween.target.x); div1Top = tween.target.y; div1Left = tween.target.x; } }); Why I mention this, because x, y, rotations, skews and others are, as far as I know, functions of a css property and the code to get them through JQuery's css method will be quite a chore, so it's a lot easier to let GSAP do the work for you, so you'll be getting the element's x and y as soon as is changed by the engine. Hope this helps, Cheers, Rodrigo.
  22. Rodrigo

    Tween around circle

    Hi, I forked part of Greensock's pen and created a simple circular disposition of the elements inside a container. Then the container is rotated using a simple tween. You can see it here: http://codepen.io/rhernando/pen/vloIj The only downside of it is the orientation of each element, since the container is rotating all the elements are rotating as well, so when the tween's progress is 0.5 (halfway) everything is upside down , so in order to apply this you should probably get the container's current angle with an onUpdate call and apply it negatively to each element, or using also an onUpdate set the elements rotation to 0. More experimentation is needed indeed, but I hope this helps you a little. EDIT: The element's arrangement was a lot easier than i thought, just set the individual angles based on the amount of elements and then subtract 90, because the first element is on the left side of the circle at minus 90 degrees position. Codepen updated. Cheers, Rodrigo
  23. Rodrigo

    Tween around circle

    Hi, I modified the pen in order to compare the different beziers in it with the curves generated. I can't though draw the simpler curve because I don't know the math in it and what the resulting points are and I didn't exported the code of greensock's pen, so the tween is compared with the quadratic curve and a full circle. Also I added another tween with simple bezier and curviness which approaches very well to the full circle. Is the same address: http://codepen.io/rhernando/pen/kjmDo Cheers, Rodrigo.
  24. Rodrigo

    Tween around circle

    Hi and welcome to the forums. The site you reference is quite amazing and not the easiest thing to achieve, but not the hardest either and if you work hard it can be achieved with GSAP. Now in terms of achieving a circular tween the best way I recommend would be with the bezier plugin, you can do it with any of the types the plugin has, like this: /*SIMPLE BEZIER*/ TweenMax.to(div1, 1, {bezier:[{x:100, y:100}, {x:0, y:200}, {x:-100, y:100}, {x:0, y:0}], ease:Linear.easeNone}); /*QUADRATIC BEZIER*/ TweenMax.to(div1, 1, {bezier:{type:'quadratic', values:[/*p1*/{x:0, y:0},{x:100, y:0},{x:100, y:100}, /*p2*/{x:100, y:200},{x:0, y:200}, /*p3*/{x:-100, y:200},{x:-100, y:100}, /*p4*/{x:-100, y:0},{x:0, y:0}]}/*bezier end*/, ease:Linear.easeNone}); The reason for throwing both (simple and quadratic) is because with canvas you can preview how a quadratic curve would look like, giving you a glimpse of the path your element will go through. Another way to preview the paths of a bezier is the pen of the Greensock collection that allows you to see the path, you can play with it and use a TweenMax.set in order to see an immediate render of the path instead of waiting, you can see it here: http://codepen.io/GreenSock/pen/ABkdL I've set up a pen to illustrate a circular tween: http://codepen.io/rhernando/pen/kjmDo Is not the complete thing but I hope it helps you getting on your way. Cheers, Rodrigo.
  25. Thanks for the info Carl, everyday you learn something new. But what threw me off here is the fact that using the original code posted by Bel the first time you call the ajax function in firefox it actually works and in successive calls it doesn't work anymore. Cheers, Rodrigo.
×