Jump to content

John Polacek last won the day on August 11 2012

John Polacek had the most liked content!

John Polacek

  • Posts

  • Joined

  • Last visited

  • Days Won


John Polacek last won the day on August 11 2012

John Polacek had the most liked content!


11 Newbie

About John Polacek

Recent Profile Visitors

2,018 profile views
  1. Hey Greensock fans - Just wanted to share a new open source thing I made that I think you might like. It is a little project that makes it easy to add Greensock animation to web presentations. It is especially cool if you are a Club Greensock member so you can take advantage of SplitText, MorphSVG, etc. Fancy intro: http://johnpolacek.com/introducing-tweendeck/ Demo/docs: https://johnpolacek.github.io/tweendeck/ Github repo: https://github.com/johnpolacek/tweendeck/ I created TweenDeck so I could build an animated slide deck for a talk I gave yesterday which you can find at http://johnpolacek.com/rethinking/
  2. Nevermind. Dumb error on my end.
  3. Working on a fun new project with some interesting timeline scenarios. As part of that, I'm composing some arrays of tweens then adding them to a timeline. The results didn't go as I expected. I made an isolated Codepen to demo (see link below). In that link, I am expecting Test 1,2,3 to animate the same as Test 4,5,6. What am I missing? http://codepen.io/johnpolacek/pen/PmwQKr
  4. Some issues with the code: You embed jQuery twice It is recommended to put the JS at the bottom of the page before </body> You have 2 document ready events. The 3rd parameter in your TweenLite.from statement is missing a closing bracket: you did:{css:{position:'fixed'} should be: {css:{position:'fixed'}} [*]The TweenLite.from statement isn't properly closed with a parenthesis you did: TweenLite.from( $('.scale'), 3.25, {css:{position:'fixed'} should be: TweenLite.from( $('.scale'), 3.25, {css:{position:'fixed'}}) [*]initScrollAnimations() is never invoked. And in the example provided, isn't necessary. If you want to improve your JS chops, I recommend taking the free JS courses at http://www.codecademy.com/tracks/javascript Also, I recommend using Dev Tools and a JavaScript validator (like http://www.jslint.com) to catch these types of errors. $(document).ready(function() { $('body').css('visibility','visible'); $('#wrapper').css('display','block'); var controller = $.superscrollorama(); controller.addTween('.scale', TweenLite.from( $('.scale'), 3.25, {css:{position:'fixed'}}), 0, 200); });
  5. Tweening is just transitioning between one css state and another. If you set the css to the first transform state without any tweening, you can see that it is positioned in the top left. Let's fix that. First set the parent element text-align propert to center to horizontally align the image inside. #orb1 {text-align:center;} Next tween the margin-top property of the element to keep it in the center. controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), 6, {css:{marginTop:'50px', opacity:0, width:20, height:20}, immediateRender:true, ease:Quad.easeInOut}, {css:{marginTop:'0', opacity:1, width:290, height:290}, ease:Quad.easeInOut})); And that should do it
  6. You can add an offset after the tween to adjust when the scrolling begins: controller.addTween('#fly-it', TweenLite.from( $('#fly-it'), 3.25, {css:{left:'2000px'}, ease:Quad.easeInOut}), 0,200); controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), 3.25, {css:{opacity:0, rotation: 360}, ease:Quad.easeInOut}), 0, -200) The '0' parameter is the duration of the tween (0 means it autoplays through) and '200'/'-200' are offsets to the default scroll position in which the animation starts. Also, note that I'm using TweenMax. This is because animations with a duration use the tween progress property, which is only available on TweenMax tweens.
  7. Pinning elements takes them out of the normal page flow. The best way would probably be to assign the scroll position numerically.