OSUblake

I don't delete my pens, but you should probably signup for a CodePen account if you haven't already. Having an account will allow you to fork anything you like. All you have to do is click the fork button and it will create a copy for you.

Hi Janmd, Our examples are doing the same thing, the only real difference is Diaco's example is listening for mouse events, which fire once. In my example, I'm listening for keydown events which constantly fire, so I added in some basic logic to prevent it from recreating a new animation every time it fires. jQuery is not needed for anything related to GSAP. We only used it to find the document height, window height, window scrollTop, and mouse/keyboard events. Nothing special. Here's another version that you can play around with to make a comparison. Instead of using some arbitrary total/scroll time value, you can enter a speed value for how many pixels you want it to scroll per second. I also added in a timeScale value, which will increase the speed when you press or release the CTRL button. Using timeScale would be a good way to create the different speeds for you num pad buttons. http://codepen.io/osublake/pen/myMNNL

Nice! That works much better than the delayed call. Love the background too. See if you can figure out my easeInOut problem. It works fine when you scroll a long distance, but if you're near the top and press up, or near the bottom and press down, it scrolls too fast. I need to figure out some sort of ratio to slow it down based on distance.

Hi Janmd2014, A delayed call might result in some jumping, so here's another way to go about this. Create a tween when a key is first pressed, and set its time based on its scroll position. While the key is being held down, ignore any more calls to create the tween. When the key is released, kill the tween. You can even add in some easing for acceleration. The longer you hold the key down, the faster it will scroll. Use the UP and DOWN keys to auto scroll http://plnkr.co/edit/TAmtkT?p=preview EDIT: I removed the Polymer scripts that were causing it not to work in Firefox and IE. CodePen URL: http://codepen.io/osublake/pen/emEajW

You can use Draggable to create... Slider Splitter Scrollable Tabs (It's under E. You need to resize your screen to see it, but you can drag it) You can create some of these Hero Transitions by tweening a className. https://www.polymer-project.org/components/core-animated-pages/demo.html Here's a pen by Chrysto that does the animated tabs bar http://codepen.io/osublake/pen/WbRoWg Thomas Burleson has done some crazy stuff using GSAP with Angular. Check out the HTML code in these pens! http://codepen.io/ThomasBurleson/pen/KwNoNP http://codepen.io/ThomasBurleson/pen/jEVyjr

Hi Hareeshch, You can use the ng-animate module to trigger animations when the class "ng-hide" is added or removed from your element. Depending on how to plan to animate your partials, you might need to position them absolute so that they are not stacked on top of each other when transitioning. You can read about that in this thread. This demo should help you out. http://plnkr.co/edit/7E7HKQ?p=preview

Hi Michael, You can use sin for vertical motion. http://codepen.io/osublake/pen/pvrGqR

This is great! I've often wondered about your thoughts on Web Animations and how GSAP fits in. I don't see Web Animations making GSAP obsolete. Rather, I see more people being turned onto GSAP for one simple reason, abstraction. The same reason people use jQuery, LoDash, D3, Pixi, and CSS/JS preprocessors. And If GSAP ends up becoming syntactic sugar for Web Animations, I'm sure more people will prefer GSAP's API over the Web Animations API. // Web Animations var animation = new Animation(element, {"transform": "translate(100px, 200px)"}, 1500); // GSAP var animation = TweenMax(element, 1.5, { x: 100, y: 200 }); The Web Animations API also use arrays of keyframes to group animations together, unlike the nice method chaining that GSAP offers. You check out what some of the syntax looks like here. https://www.polymer-project.org/platform/web-animations.html And here's some Web Animation demos to check out. You can view the page source to check out the code. http://web-animations.github.io/web-animations-demos

Diaco, I like what you did! I didn't know you could have different draggables associated with the same element. Nice to know.

What problems were you seeing? This seems to work. http://codepen.io/osublake/pen/MYvVMZ

Hi Reanimator, Taking off from the example in this thread, what you can do is change your draggable's instance type (rotation, x/y) depending on where you click. So if you click on the element, make it type x,y. If you click on the handle, change your draggable instance to type rotation. http://codepen.io/osublake/pen/RNZxJx

Hi IJ, What you need to do is record the state of timeline when the user first drags the slider, i.e. whether it's playing or paused. Then you can figure out what to do when the user stops the slider. var isPaused; $slider.slider({ range: false, min: 0, max: 100, step: 0.1, slide: function (event, ui) { timeline.progress( ui.value / 100 ).pause(); }, start: function (event, ui) { isPaused = timeline.paused(); }, stop: function (event, ui) { if (!isPaused) timeline.resume(); } }); http://codepen.io/osublake/pen/pvrpWB

I think your random function is a little off. Try this one. function getRandomInt(min, max) { return min + Math.floor(Math.random() * (max - min + 1)); } http://codepen.io/osublake/pen/NPgZyw

I really like the clock view! I've never seen easing shown like that, but it's really helpful.

I'm wondering why I have to explicitly set CSS properties that use calc() with GSAP before being able to Tween to a calculated value? It doesn't matter if the value is set with CSS beforehand, I still have to register it with GSAP before being able to animate it. // Have to set if first TweenMax.set(element, { width: "calc(25% - 10px)" }); // Now I can tween it TweenMax.to(element, 0.5, { width: "calc(100% - 10px)" });

Just change the transform-origin y-offset to bottom. TweenMax.set($progressBar, { scaleY:timeline.progress(), transformOrigin: "0px bottom" }); http://codepen.io/osublake/pen/KwqqKZ

I probably should have mentioned that the code above will only work if the shape is a square. For a rectangle, you will need to figure out the ratio or angle before you start to drag. CodePen URL: http://codepen.io/osublake/pen/EaXNMd

Hi Cirox, You can constrain the shape by doing a little math... var offset = this.x * Math.tan(45 * Math.PI / 180); TweenLite.set(drag, { width: this.x, height: offset }); TweenLite.set(handle, { top: offset }); But an even easier approach would be to do it as a ratio. 45 degrees would be 1:1, so just set the height and width equal to each other. TweenLite.set(drag, { width: this.x, height: this.x }); TweenLite.set(handle, { top: this.x }); CodePen URL: http://codepen.io/osublake/pen/emWwzb?editors=001

I had a hard time understanding your question because you responded back that selecting an element was not the problem. If you could select the element, then you could figure out its position. Were you using jQuery to do this? Not that it matters now, but I created a scroll to demo to try and figure out what the issue was. I'm guessing you were trying to get the position inside some deeply nested elements because I had no problems going down 1 level. Oh well, glad you figured it out! http://plnkr.co/edit/czdXVFv9tojP3B1Ac0Ds?p=preview

You're supposed to be able to select shadow dom elements like this this.$.shadowElement; But I can't get it working outside of Chrome. See this example. http://plnkr.co/edit/0fJl0cmK6iSUrQw7KuJe?p=preview Are you using anything besides Polymer? With Angular it's pretty easy to hook into Polymer, so I know it's possible. What are you trying to scroll to? You might be able to just copy and create your own version of the element if it's not complicated.

Hi Scribble, The SVG inside the <use> tags won't show up in your CodePen because the file is on another domain and you aren't referencing it (#left-hand). <svg class="left-hand"> <use xlink:href="http://my-server.com/left-hands.svg#left-hand"></use> </svg> However, using <use> might not be the best solution if you are trying to create SVG animations. First, IE does not support it, although there are ways around this. Second, the SVG is encapsulated so you won't be able to directly select your shapes/paths. // Won't work with <use> var hand = $("#left-hand-palm"); Diaco did a good job of showing us how to embed and reference an SVG. However, an embedded SVG is encapsulated inside an external document, so things like your CSS styles won't crossover into the SVG's document. I like to load external SVGs via Ajax, and then inject them into the page. Doing this will allow you to interact with the SVG just like an inline SVG. No need to modify your code! Here's a demo of how to display an SVG using the ajax, object, use, and inline approaches. Notice how only the ajax version works like the inline version. Plunker URL: http://plnkr.co/edit/LneUEK?p=preview

Here's another tip. You can add listeners to your media queries instead of doing a window resize event to find a match. Adding listeners will allow you to create a dynamic list of queries for things like height, width, orientation, handheld, aspect, etc. Here's a scaled down version of what I use. You can see the dynamic queries in action when you click the remove button on the large media div. http://codepen.io/osublake/pen/vExQEy

No jQuery needed. It's a method on the window object. edit... Duplicate of Jonathan's.

Maybe you weren't able to resize it to < 400px. I changed it to 600px. See if that helps. http://codepen.io/osublake/pen/KwWRwK

You can match media queries with JavaScript, although IE support is limited. https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries Here's a demo displaying a different div based on the screen width. Resize the window to see it change. You could add some logic inside the match statements for your media queries. http://codepen.io/osublake/pen/KwWRwK