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, Another alternative would be to put all the faces inside a container and rotate that container using the transform-style property, something like this: CSS .container { perspective: 500px; border: 1px solid black; margin:50px; background:#ccc; width:150px; } #cubeParent{ transform-style:preserve-3d; height:150px; width:150px; } #face1, #face2, #face3{ height:150px; width:150px; position:absolute; } #face1{ background:#00F; } #face2{ background:#f0f; } #face3{ background:#063; } The container style is just to have a reference of the cube's position, and the most important thing is that the #faceCube has transform-style: preserve3d, without that it doesn't works. HTML <p> <button id="btn1">Tween Faces</button><button id="btn2">Rotate Parent</button> </p> <div class="container"> <div id="cubeParent"> <div id="face1"></div> <div id="face2"></div> <div id="face3"></div> </div> </div> JS var tl1 = new TimelineMax({paused:true}), face1 =$("div#face1"), face2 =$("div#face2"), face3 =$("div#face3"), cubeParent = $("div#cubeParent"), btn1 = $("button#btn1"), btn2 = $("button#btn2"); tl1 .to(cubeParent, .5, {z:'-=75'}) .to(face1, .5, {rotationY:90, x:'-=75'}) .to(face2, .5, {rotationX:90, y:'-=75'}, '-=.5') .to(face3, .5, {rotationX:90, y:'+=75'}, '-=.5'); btn1.click(function() { tl1.play(0); }); btn2.click(function() { TweenMax.to(cubeParent, .5, {rotationY:'+=45'}); }); You can see it working here: http://jsfiddle.net/rhernando/PfPZm/ Hope this helps, Cheers, Rodrigo.
  2. Hi, I've updated the fiddle in order to make it work with images. http://jsfiddle.net/fFJ29/1/ Cheers, Rodrigo.
  3. Hi Jamie, That could be happening because you're tweening both the container and the div with the image, thus resulting in the sepia image taking a good shake in the process. One solution would be to translate both elements using x and y instead of using top and left, like that you could control the transform origin point, which could be helpful. But the best choice would be to tween the clip property of the container that holds the div with the sepia image, something like this: #mainCont{ width:400px; height:400px; background:#f0f; overflow:hidden; } #firstCont{ width:400px; height:500px; background:#0FF transparent; position:absolute; overflow:hidden; clip:rect(0px, 400px, 500px, 0px) } #childElem{ width:400px; height:400px; top:50px; left:50px; background:#00f; position:relative; } then the HTML:<div id="mainCont"> <div id="firstCont"> <div id="childElem">alo alo</div> </div> </div> And finally the JS:$(document).ready(function(){ var firstCont = $("div#firstCont"), child = $("div#childElem"), btn1 = $("button#btn1"), tn2 = new TweenMax.to(firstCont, 2, {clip:'rect(0, 0, 500, 0)', paused:true, repeat:1, yoyo:true}), tn1 = new TweenMax.to(firstCont, 2, {left:0, paused:true}); TweenMax.set(firstCont, {rotation:11, left:-41, top:-52}); TweenMax.set(child, {rotation:-11, top:50, left:50}); btn1.click(function() { tn2.play(0); }); }); You can see it in action here:http://jsfiddle.net/rhernando/fFJ29/ Hope this helps, Cheers, Rodrigo.
  4. Rodrigo

    Tutorials?

    Hi, Since this post came up, I started working in a tutorial about integrating GSAP JS with wordpress, but because of work and problems with the server where my blog was in I couldn't publish it before, therefore I don't know how useful can be right now, but I'm hoping that in the future it could help someone. It deals with the basic of using GSAP JS in wordpress and how can you use it on specific posts and pages: http://codeaway.info/incorporating-greensock-ap-js-into-wordpress/ Cheers, Rodrigo.
  5. Rodrigo

    clip in IE8

    Hi, As far as clip I haven't worked with it yet, so I couldn't tell you why is not working with IE8, but my guess will be that in order to make it work in IE8 could cause a performance problem (you just got to love IE8 ). As for a fallback is not that hard, check this post in order to see how: http://forums.greensock.com/topic/7256-ie-9-fallback-for-3d-transform/ Hope this helps, Cheers, Rodrigo.
  6. Rodrigo

    Swinging sign?

    Hi and welcome to the forums, You can see it in action here: http://jsfiddle.net/rhernando/qTSnC/3/ But since the css plugin supports css3 3D transforms all that workaround code is no longer necessary, you can achieve that with just a few lines of code and without including all the vendors prefix (the engine does it for you). It would be something like this: $(document).ready(function(){ var img1 = $("img#img1"), tl1 = new TimelineMax({paused:true}), btn1 = $("button#btn1"); //you set up the default perspective for all elements in the DOM CSSPlugin.defaultTransformPerspective = 400; //the point from which the sign is hanging TweenMax.set(img1, {transformOrigin:'50% 0%'}); tl1 .to(img1, .2, {rotationX:-20}) .to(img1, .2, {rotationX: 20}) .to(img1, 2, {rotationX:0, ease:Elastic.easeOut}); btn1.click(function() { tl1.play(0); }); }); You can see it in action here: http://jsfiddle.net/rhernando/qTSnC/4/ Hope this helps, Cheers, Rodrigo.
  7. Rodrigo

    home page popup

    Hi again, I set up a simple example so you can see it in action, the only problem is that I couldn't set up syntax highlighter properly and it look a little sterile in general, but is getting quite late around here so you'll have to look at the code with firebug or developer tools, but tomorrow I'll correct that situation. http://codeaway.info/sample.code/popup/ EDIT: I uploaded the syntax highlighter , so you can see the code of the sample. Cheers, Rodrigo.
  8. Rodrigo

    home page popup

    Hi, Is not too hard, you need to create the overlay (semi-transparent element over everything in the page), then the message element and finally the code so the message is always at the center of the page. First you have to write the css: html, body{ height:100%; margin:0; } #overlay{ height:100%; width:100%; background:#000; z-index:5000; position:fixed; top:0; left:0; } #messageBody{ background-color: #D9D9FF; width:800px; min-height:400px; border-radius:10px; box-shadow:0 5px 5px #000; position:fixed; z-index:5500; overflow:hidden; } Very important that the position of both elements is set to fixed, otherwise the user can scroll and they'll be out of the screen. Another thing to note is that I'm not sure how necessary is the html, body rule now a days, I'll keep using it but maybe someone with more updated knowledge in this regard could clarify that. Then you have to position the message body, a usual technique is to set the margin property to auto, but I prefer javascript because of cross browsing: var windowWidth = $(window).width(), windowHeight = $(window).height(), messageBody = $("div#messageBody"), overlay = $("div#overlay"), msgBdHeight = messageBody.outerHeight(), msgBdWidth = messageBody.outerWidth(), posTop = (windowHeight / 2) - (msgBdHeight / 2), posLeft = (windowWidth / 2) - (msgBdWidth / 2); //Set the elements initial state TweenMax.set(overlay, {autoAlpha:0, top:posTop, left:posLeft}); TweenMax.set(messageBody, {vars});//Here the rest is up to you, if you want //to set a scale up tween you should use a small scale , also could be a //fly by, etc., the sky is the limit. And finally you set up a timeline for showing the pop up, first you show the overlay and then the rest of the message, something like this: var tl1 = new TimelineMax({paused:true}), tl2 = new TimelineMax({paused:true}); tl1 .to(overlay, .25, {autoAlpha:.35})//here you can set how fast and how //transparent you want the overlay .to(messageBody, .5, {vars});//this will depend of the options you used //in the set tween for the body, and how you want your message to appear. Roughly that's how you could set up a popup message, the animations are up to you, because you have quite a handle of them to play around. One last advice will be that if your intention is to put a pop up in your home page, maybe you should consider a tracking cookie, so your visitors will see the pop up just once a day, or once every number of hours, because it could become somehow annoying to keep seeing the pop up every time you go to the home page or you load the page, unless the pop up will show on a user event like a mouse click, in that case don't pay attention to everything I wrote above. Hope this helps, Cheers, Rodrigo.
  9. Hi and welcome to the forums, You're right on using the tweenFromTo() method, the only thing missing is the callback to pause the timeline, something like this: var timeline = new TimelineMax({paused:true}), div1 = $("div#div1"); timeline .to(div1, 1, {autoAlpha:.2}, '00') .to(div1, 1, {scale:2}, '01'); //And now you tween to the specific label div1.mouseenter(function() { timeline.tweenFromTo("00","01"); }); div1.mouseleave(function() { timeline.tweenFromTo("01","00"); }); You can see it working here: http://jsfiddle.net/rhernando/ncX7j/1/ Edit: You should also consider use the tweenTo() method because using tweenFromTo() generates an immediate render, meaning if you leave the mouse before the tween is complete it goes immediately to the label "01" and then goes to the label "00", and if you put the mouse over before the reverse is complete it goes to the label "01" and then reverse to the label "00". Also in order to pause the timeline there is no need for callbacks, the timeline goes to the point indicated and no further. I updated the fiddle and the code. Here's the fiddle using the tweenTo() method: http://jsfiddle.net/rhernando/ncX7j/2/ Sorry for the initial mistake. Hope this helps, Cheers, Rodrigo.
  10. Hi and welcome to the forums, I've never worked with superscrollorama but it should be as simple as repeating the code you have in line 54 of the pastebin provided. Maybe you could post the code that's giving you trouble in order to see what maybe happening. Cheers, Rodrigo.
  11. Hi and welcome to the forums, Maybe the reason why tweenTo() isn't working is because when you use superscrollorama the timeline progress is set by the scroll position, therefore if you use tweenTo() it's very likely that the function is tweening your timeline, but the screen is not where the action is happening so you're not able to see your timeline being tweened. Now in order to get the pixel position of a specific label you need to know the label's relative position in the timeline and then associate it to the window scroll points in which your timeline is animated via superscrollorama (the values you give to superscrollorama when you set the function for that particular timeline). For example you have the following timeline: var tl = new TimelineMax({paused:true}); tl .to(div1, 5, {left:400}, 'label1') .to(div1, 4, {top:400}, 'label2') .to(div1, 1, {scale:2}, 'label3'); The timeline lasts 10 seconds, the first tween 5 seconds, the second 4 seconds and the third one just 1 second. The fisrt label is at 0 seconds, the second label is at 5 seconds and the third label is at 9 seconds. So using the getLabelTime() method you can get that value into a variable, and with the duration() method you get the timeline total time. With those values you can see at which position the label is in terms of the percentage of the timeline which is in other words the current progress of the timeline , and since superscrollorama works with start and end values of the window's scroll position you can relate that percentage with the scroll position. If you look at this tutorial I made some time ago you'll find this expression for relating the current scroll position with a tween/timeline progress: var progressNumber = (1 / (endPoint - startPoint)) * (getPos - startPoint); The breakdown is as follows: progressNumber: the progress of the tween/timeilne. endPoint: where the tween/timeline ends once you've scrolled there. startPoint: where the tween/timeline starts as soon as you've scrolled to that position. getPos: the current position of the window as you scroll up & down. var tlDuration, lab2Time, lab2Pos, tlDuration = tl.duration(); lab2Time = tl.getLabelTime('label2'); Since you know the starting and end position (values that you feed to the superscrollorama function) and you can calculate the timeline progress at a certain label, all you have to do is isolate the getPos value in the first expression: var tlDuration, lab2Time, lab2Pos, tlDuration = tl.duration(); lab2Time = tl.getLabelTime('label2'); The expression with the current variables will look like this: (lab2Time / tlDuration) = (1 / (endPoint - startPoint)) * (lab2Pos - startPoint); Since we know the progress value but not the lab2Pos variable value, we isolate it: lab2Pos = ( (lab2Time / tlDuration) * (endPoint - startPoint) ) + startPoint; And if we assume that the timeline begins at 400 pixels and ends at 3000 pixels, it will result in this: lab2Pos = ( ( 5 / 10) * (3000 - 400) ) + 400 = 1700 Finally in order to get your tween to that position and at the same time scroll the window you could use the scrollTo plugin, like this: TweenMax.to(window, 2, {scrollTo:lab2Pos}); You can see it working here: http://jsfiddle.net/rhernando/fdFFp/2/ Hope this helps, Cheers, Rodrigo.
  12. Hi, Another chance is to use outerWidth and outerHeight because with those properties you're considering padding and borders of the elements, so if for any reason they change, the function gets the new value immediately. It would be something like this: var cont = $("div#container"), contWidth = cont.outerWidth(), contHeight = cont.outerHeight(), div1 = $("div#div1"), div1Width = div1.outerWidth(), div1Height = div1.outerHeight(), div1CenterLeft = ( ( contWidth - div1Width )/2 ), div1CenterTop = ( ( contHeight - div1Height )/2 ), elemClick = false, tn1 = new TweenMax.to(div1, 1, {left:div1CenterLeft, top:div1CenterTop, scale:1.4, paused:true, boxShadow: '0px 5px 5px rgb(0,0,0)'}); Here you can see it in action: http://jsfiddle.net/rhernando/v85Zp/ Hope this helps, Cheers, Rodrigo.
  13. Right on Jack, that was my problem, I thought about the set call in the wrong way but I see know that is just a tween as any other, thus causing unwanted behavior but just because of how I used them. At the end invalidating the previous tween was the perfect solution. Thanks a lot for the explanations and patience Cheers, Rodrigo.
  14. Hi, There are three ways as far as I know, the first one is to change the vars object of the tween: tl.getChildren()[0].vars.css.top = -100; The downside of this method is that if the timeline has been already played the original value (-50px) is recorded and you can't change it, just like Jack explained it in this post. The other way I know to do that is by deleting the tween and then add the new tween at that label: var tl = new TimelineMax({paused:true}); tl.to(element, time, {css:{top: -50px}}, "my-label"); Then you remove the tween and add the new one at the same label: tl.remove(tl.getChildren()[0]); tl.to(element, time, {css:{top: -100px}}, "my-label"); This method forces you to know the index position of the tween you want to eliminate. And the last one is to add a new tween at the label without removing the previous one, like this you overwrite the old tween with the new one: tl.to(element, time, {css:{top: -100px}}, "my-label"); But in this case you're overpopulating your timeline and that may create a problem as well, but I couldn't tell you that, maybe Carl or Jack could. Hope this helps, Cheers, Rodrigo.
  15. Hi Jack, Thanks for the clarification and help to understand how things works. What I meant with the set calls is that I thought that by adding a set call at the beginning of the timeline I'd force the timeline to set to properties of the element when the timeline started, the point is that it also created a problem with other properties at the start of the timeline. Cheers, Rodrigo.
  16. Hi Jack, thanks for the answer and sorry for not coming back to you before. The thing is I tried what you said but it doesn't works, but filling the timeline with pauses and console.log's brought to me the fact that the previous tween of the timeline is the one keeping the old value, and therefore invalidating that tween made it work. in the following fiddles do as follows: Play the timeline. Change Height and play the timeline. Reset the fiddle to clear all init data Change Height and play the timeline. Restore Height and play the timeline. As you see invalidating the previous tween allows playing the timeline with the changed property. http://jsfiddle.net/rhernando/KaerE/ (Invalidate the changed tween) http://jsfiddle.net/rhernando/KaerE/1/ (Invalidate the previous tween) Also I ended up having quite a lot of problems by adding the set tween at the beginning of the timeline so that turned to be a bad approach. Cheers, Rodrigo.
  17. Hi, Is possible to invalidate just a single property?. I have a timeline and after the first execution it stores the initialization data for future play. The thing is that one of the tweens nested in the timeline could change, because the height property of the target element changes. But if the timeline plays again the height is the original value not the changed one, which causes to look bad. So far I've sorted out like this: tl1 = new TimelineMax({paused:true, onComplete:comp}); tl1 .set(div1, {left:50, height:100}) .to(div1, 1, {left:250}) .to(div1, 1, {height:200}); By putting the set tween it takes the values to what I want, whether is the original value or the changed one. But it would be great to clear just that value. Cheers, Rodrigo.
  18. Hi Sigmund, You just have to fix the background image position to top right and works: .div2{ width:10px; height:100px; float:right; position:relative; top:10px; background:#00f url('http://upload.wikimedia.org/wikipedia/commons/b/b6/Building-300x100.jpg') no-repeat top right; } I've updated the fiddle to see it in action: http://jsfiddle.net/rhernando/EL7qJ/2/ Cheers, Rodrigo.
  19. Hi and welcome to the forums, Mhh not the easiest trick to accomplish... I wanted to work with some friction tween function some time ago but never got started properly, just some useless trials and some math going around but nothing really useful. For starting a tween with a strong easeIn function, so the element accelerates as it falls. Then when it hits the ground a timeline composed by the amount of "bounces" you wish the element to take and set dynamically how high the element goes on each bounce, but it would take quite some code to achieve that. You could create a function that populates the timeline (that should be paused), through a for loop and reduce the y position each time the loop executes, that will be the real trick. And after the element hits the ground you resume the timeline. Sorry to offer nothing but ideas but I'm a little short of time now. If I can come up with something in the next days I'll post it. Hope this helps, Cheers, Rodrigo.
  20. Hi, As far as I know transform origin works only with CSS3 transform properties like scale, rotate, skew and such, while height and width are changed taking the top left corner as origin point. Although I'm not completely sure about this i looked at documentation of CSS1 at the W3C site and in MDN and didn't find anything regarding the origin point of height and width. A possible solution would be to give the element a float:right value and see what happens, that should force the element to the right side of it's parent. http://jsfiddle.net/rhernando/EL7qJ/1/ Hope this helps, Cheers, Rodrigo.
  21. Hi and welcome to the forums, The animation looks very good, congratulations!! The way I'd do it would be to create a timeline with the complete intro animation, you put labels inside(this way you can avoid the setTimeout functions) like this you can use the tweenFromTo and tweenTo methods in order to go a specific label (if desired), check the api for further info. In order to get every circle in the same position all the time the best way would be with a fromTo tween, like that you can control both positions.The timeline will also be very helpful in order to reverse, pause, stop, seek, resume and do a lot more cool things with the animation. And just a couple of suggestions, first the css:{} wrapper is no longer required, the engine detects the properties and send them to the css plugin. myTween = TweenMax.to( circleArr[0], .5, { zIndex:0, bezier: { curviness:1.5, values:[ {left:100, top:100}, {left:75, top:75}, {left:100, top:50} ] } }); Second update to the newest version (1.9) and finally in order to get things a little more simpler you could use a javascript framework like JQuery or Prototype, specially considering the event handlers and crossbrowssing it could make your life quite easier. Hope this helps, Cheers, Rodrigo.
  22. Hi, Maybe you could try setting your circle wipe with a border radius of 50% and don't modify it during the tween in order to keep it as a circle all the time, because right now you're starting with a square and you're ending with a circle. I tell you this because I've experienced some sync problems in webkit when tweening shadow and scales. Another solution could be to create separate tweens for both properties, that is one tween for the size (height and width) and another for the border radius and then put both of them inside a Timeline so you can control both in a simpler way. Hope this helps, Cheers, Rodrigo.
  23. Rodrigo

    killing tweens

    Hi Pop, killTweensOf is a function that works via TweenMax, like this: TweenMax.killTweensOf(glb[1]); Check the api for more details. Cheers, Rodrigo.
  24. Thanks Carl, Actually I never thought about asking if Preeti was looking for something that allowed seeing 3D transforms in IE9, should've started by that Cheers, Rodrigo.
  25. Hi, In order to indicate or point the files with YepNope using modernizr, just do what I said in my first post in this thread, also take as a guide the example attached: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Modernizr</title> <script src="scripts/modernizr.test.js"></script> <script src="scripts/jquery.latest.js"></script> <script src="scripts/TweenMax.min.js"></script> </head> <body> <div id="div1"></div> <div id="div2"></div> <script> Modernizr.load({ test: Modernizr.csstransforms3d, yep : ['scripts/css3dYep.js', 'styles/css3DYep.css'], nope: ['scripts/css3dNope.js','styles/css3DNope.css'] }); </script> </body> </html> That's the entire code of the example, as you can see the div elements just have ID's, no css is loaded. The libraries loaded are JQuery (for selecting the elements), TweenMax and Modernizr (which contains YepNope). At the end the modernizr test is executed, it checks whether or not the user's browser supports CSS3 3D transforms. If the browser support 3D transforms (firefox, chrome, safari and opera) then the following files are loaded: css3dYep.js (contains the code which appends the text to "div1" and animates "div2") css3DYep.css (contains the style for "div1" - blue background and white letters - and for "div1" - pink background -). If the browser doesn't support 3D transform (IE9-) the following files are loaded: css3dNope.js (contains the code which appends the text to "div1" and animates "div2") css3DNope.css (contains the style for "div1" - red background and black letters - and for "div1" - pink background -). Finally it would be very helpful if you can set a live example or provide some code in order to see exactly what is it that you're trying to do and what is giving you problems, because, as you can see, the only thing I can do is just keep repeating myself. Hope this helps, Cheers, Rodrigo.
×