Jump to content

Rodrigo last won the day on March 17 2019

Rodrigo had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Rodrigo

  1. Good to know that you solved your issue!! Perhaps you could check SM's documentation and follow on the issue you created in order to get an official explanation. Happy Tweening!!
  2. Hi, Sorry to hear that you're experiencing this issue. Unfortunately I haven't worked with ScrollMagic so I can't tell you what could be the issue and we need to focus our time on solving GSAP specific issues, so problems with third party plugins working on top of GSAP are a bit out of our scope. Also I saw you created an issue on SM repository, so you'll have to wait for Jan or other user to provide support. As well perhaps another user here in the forums with more experience with SM could provide some help. Finally, it strikes me as unusual that any instance added to the main timeline created with scroll magic is not paused by default at runtime. Perhaps you could set the tweens to paused and see if that helps.
  3. Nice Job!!!!
  4. Hi Ben, I can propose some solutions to this. One is set the element's position to absolute and set the top/y property relative to the previous element's height and add a padding equal to the arrow's height. Like that the height is set considering that element (text) you won't experience the height jump. Another solution is to set the overflow-y to hidden in desktops (that requires to check for desktops and change the overflow of the body and html tags via JS) and once the arrow animation is done, set the overflow-y to auto and allow scrolling using the onComplete callback. I'm pretty sure that other guys around might have some great ideas, but this is mainly about JS code and CSS layout than a GSAP issue. Hopefully this helps. Rodrigo.
  5. You guys!!!!! Thanks for the kind words to my fellow moderators and Carl. Now I'm off again
  6. Hi Celli, The codepen link is broken What you could do is create a console call to see what is being exposed in the mask and how it can be animated using GSAP. This is from Snap's docs: http://snapsvg.io/docs/#Paper.mask As I see it does exposes an x and y, so perhaps you might not need the snap:{} config object and just reference the mask directly: TweenLite.to(myMask, 1, {x:300, y:300}); Sorry but I'm very short of free time now so I can't set up a working sample now. Hopefully this helps somehow.
  7. Hi and welcome to the GreenSock forums. Turns out that basically you're trying to mix oil and water, no matter how hard you try it won't work The method you're using is exclusive of jQuery and therefore it'll throw an error: Uncaught TypeError: TweenMax.to(...).queue is not a function Basically that says that .queue() is not a method of the TweenMax class. Keep in mind that most GSAP methods will return the instance itself, which makes chainability a real breeze, just like in jQuery (something that you're used to it seems;) ). Finally Diaco's advice is spot on, as usual, since GSAP has a ton of callbacks and when you work with Timelines you can even add the call() method to the mix. Also GSAP offers that ability to pass parameters to the callbacks and set the scope in the callbacks. Just take a good look at that link and you'll be on your way. If you have more questions, we're here to help. Happy Tweening!!
  8. Hi, As far as I remember, and I'm far from being a SVG expert, Snap does expose an API for the elements created with it, that can be accessed and Tweened with GSAP without too much problems. Also Anthony created a Snap plugin based on the original RaphaelJS plugin, since Snap and Raphael were created by the same guy but the difference is browser support: https://github.com/anthonygreco/GSAPSnapPlugin Take a look at it and let us know how it works.
  9. Hi, This is Javascript Ternary operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator Basically takes an expression and evaluates it. If true the first part of the code is executed, that is before the colon, if false the second part is executed. Normally to toggle a GSAP instance I use it like this: var t = TweenLite.to(element, 1, {x:300, paused:true, reversed:true}); t.reversed() ? t.play() : t.reverse(); In this case I'm using a GSAP setter/getter called reversed(). Reversed either gets the reversed status of the instance and returns a boolean. So if the instance is reversed means that is going backwards or is static but after playing backwards. If the instance is going forward or is completed then reversed returns true. Now considering that you're playing the animation forward but then you hide the elements immediately, there's no need to reverse the timeline, just pause it at the beginning and then since the animation wasn't actually reversed we use the method as a setter reversed(true), therefore: tl.reversed() ? tl.play() : tl.pause(0).reversed(true); Hopefully this makes things clearer.
  10. Rodrigo

    GSAP on iPad

    Nope, the only alternative would be to use scales or clip, but using scales you'll have to hide the content of the element because it'll look distorted. Here's a demo of the GreenSock collection using clip: http://codepen.io/GreenSock/pen/KmLjr
  11. Hi, This is a very common issue when working with any type of from() instance. The point is that when you click the button, all the elements are staggered from a specific set of values that you're passing in the config object. Then you close the menu and you call the same staggerFrom instance on the elements again, like you are opening the menu again and so forth with every single click of the button. For repetitive toggling such menus and buttons, is always a good idea to store a reference in a variabla and play/reverse or manipulate that instance with a lot more ease. Also, you don't have to set the default transform perspective on the click event, like that you're also setting that value on every click. CSSPlugin.defaultTransformPerspective = 600; var tl = new TimelineLite({paused:true, reversed:true}); tl .staggerFromTo('ul#menu li', 1.5, {rotationX:-90, transformOrigin:"50% 0%"}, {rotationX:0, ease:Elastic.easeOut}, 0.4) $(".menu-toggle").on('click', function() { $(this).toggleClass("on"); $('.menu-section').toggleClass("on"); $("nav ul").toggleClass('hidden'); var logo = document.getElementById("logo"); var logotitle = document.getElementById("logotitle"); TweenLite.to([logo,logotitle], 0.5, {top:-50}); if (logo.style.top == '-50px') { TweenLite.to([logo,logotitle], 0.5, {top:300}); } tl.reversed() ? tl.play() : tl.pause(0).reversed(true); }); http://codepen.io/rhernando/pen/avOmMB Finally you don't need to add TweenLite, TimelineLite and the CSS Plugin if you're already including TweenMax.js, that file contains all those tools as well as a lot of plugins:
  12. Rodrigo

    GSAP on iPad

    Hi, As far as I can see no, because you also are tweening scales and other transform properties and GSAP has an auto force3D feature since version 1.12 that creates a GPU layer for hardware acceleration as soosn as the animation starts and removes it when is completed. The reason for using transforms is because top/left force layout calculations, which consumes CPU cycles, which ultimately keeps the CPU too busy generating the animation hiccups you're describing. Hardware acceleration it's already there so force3D shouldn't make any difference.
  13. Hi Pascale and welcome to the GreenSock forums. I'll try to give you the best possible answers, I'm sure Carl and/or Jack will be able to add a bit to this. The download button gives you access to what you can download for free. This includes the main core of GSAP like TweenLite, TweenMax, TimelineLite, TimelineMax and a bunch of plugins. Actually it'll be shorter to type which plugins/tools you don't get, these are the DrawSVG Plugin, Physics 2D plugin, ThrowProps Plugin, ScrambleText plugin and the SplitText tool. You get all the rest of the toolset with the download button, which also points to the CDN links of every of those tools. You can find the prices for every GreenSock Club alternative as well as a lot of information regarding the included tools and licensing in this link: http://greensock.com/club/ The code given whether you've purchased a Club membership or not is totally open, so no surprises there. Of course the main idea is that if you use membership only tools you should protect as much as possible your investment. GSAP, as well as any other JS code works on the browser, not the OS (the browser actually has to deal with the OS) so regardless of your OS you can work with GSAP. All you need is a text editor. The browser compatibility is one of the biggest assets of GSAP. Last time I checked browser support goes all the way back to the land of the dead as it works even with IE6+, so that pretty much covers every browser out there as well as a lot of device browsers too. I've never had a bad moment saying "well I thought this browser was supported", it's been more like "whoa!! it works even in this crappy browser". Currently there are several projects of mine (and I'm sure thousands of projects made by other users) working even on IE7 and the last time I checked GSAP was working ok with versions 30+ of Firefox, 35+ of Chrome and Safari 5+. But the need of going back to those browsers is becoming thinner every day (luckily for us) as few projects are requiring IE8 support these days. Hopefully this covers all your doubts and if you have any other this is the place to ask. Happy Tweening!!
  14. Rodrigo

    GSAP on iPad

    Hi, Using X and Y are normally 0 when the elements are first rendered on the screen and for what I saw on your game, most elements have an absolute position, so it shouldn't be any difference. Although the best way to know is testing and testing . The lagSmoothing parameter shouldn't affect the timer, since it works in a different areas so to speak, but keep in mind that with lagSmoothing your animations will last as long as they are intended. For example if the animation has to last 0.5 seconds, and when the animation is on the 0.2 seconds mark, the CPU chokes for 0.5 seconds, your animation will restart after the CPU gets un-choked and the missing 0.5 seconds of the animation will complete. During those 0.5 seconds that the CPU gets too busy the timer will still be running, so basically that will mean that the user will have less time. Although the main problems seem to be happening when the timer hasn't started or is already done, but you'll have to play with it and see what happens. Another option would be to store the animations that are giving you trouble and take them to the end and then back to the beginning in order to force the rendering of the values, that could save some CPU cycles and speed things up, like this: var t1 = TweenLite.to(element1, 1, {vars}), t2 = TweenLite.to(element2, 1, {vars}); t1.progress(1).progress(0); t2.progress(1).progress(0); Give that a try and let us know how it goes.
  15. Hi, Since you're using jQuery I see no reason to keep using documentGetElementById as a selctor, just use jquery. In order to keep using the dollar sign, you can keep jquery in a IIFE: https://en.wikipedia.org/wiki/Immediately-invoked_function_expression (function($){ // this is the equivalent to document.ready(); $(function(){ // your code here }); }(jQuery)); Finally you can use a common class in all your spin elements (the ones that will trigger the spin function) and use that selector to spin the common element. Then you can create a single tween to spin the element and play/reverse it. http://codepen.io/rhernando/pen/jbEggN That creates far less code and it should work. Let us know if you need something else. Happy Tweening!!
  16. Rodrigo

    GSAP on iPad

    Hi, Cool game!! it seems that you did an excellent job teaching yourself JS, great job!! For what I saw in your code in some GSAP instances you're using top and left, try replacing them with y and x in order to use hardware acceleration, that might improve performance. Also a question, is always the same part of the animation that is skipping?, is the same type of animation (the fade in/out animations of the symbols for example)? Perhaps you could play with lagSmoothing and see if a smaller threshold can improve performance, but you'll have to see how that affects your timer function (I believe you're using a setInterval for that): http://greensock.com/gsap-1-12-0 Give that a try and let us know how it works. Happy Tweening!!
  17. Hi Paul and welcome to the GreenSock fourms. As ektorp mentioned when animating position properties such as left, top, margins and paddings, the element being animated has to have a position property as well, whether is relative, absolute or fixed. Another option is to use transforms, which don't depend on the element having a position set. So in your case the code will be like this: TweenMax.to(".soccer", 2, {x:500}); That also will kick the auto force3D feature of the CSS Plugin, which creates a translate 3d in order to pass it to the GPU (so it's hardware accelerated) when the animation starts and then removes it when the animation is completed. This makes the animation far smoother. Happy Tweening!!
  18. Hi Tony and welcome to the GreenSock forums. Please provide a reduced codepen samle that clearly demonstrates the issue. Is far easier to debug live code than a few snippets. Please take a look at this link: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Finally, since you're talking about canvas, I believe that the issue lies there, as the CSS Plugin is capable enough to parse box-shadow's complex strings. http://greensock.com/css3/ I don't know how shadows work on the canvas spec or if you're using a library for that, that exposes an API to animate those values, but the vars you're passing in the config object do work in regular DOM elements. Again, a codepen sample will make everything more clear and speed up the support. We'll be waiting for it!!
  19. Hi and welcome to the GreenSock forums. Perhaps I'm missing something here but the code snippet in your post shouldn't trigger any layout calculations. GSAP normally uses a translate for this cases (percentage based transformations) and a translate3D property for GPU acceleration which is later removed and replaced with a 2D matrix. I even made a test and the layout events are not related to GSAP, in fact the only layout operations is when GSAP uses the .getBoundingClientRect() method when the instance is instantiated. Perhaps you could create a reduced case test that clearly demonstrates the issue or perhaps share some dev tools timeline data to see. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Finally, for percentage based transforms you can use xPercent and yPercent. Please take a look at the following blog entry: http://greensock.com/gsap-1-13-1
  20. Hi Oliver, There were a few issues in your code. First the selector for the each loop wasn't working, therefore the each loop didn't even begun. In this situations is better to add a common class to the elements you want to loop through and use that as a selector, is far easier. Second, on your code you were referring to the SplitText instance and not the chars array created by SplitText, so even with the loop working you still would get an error or no animation at all. Finally is better to not use <span> for the SplitText since there are some browser issues animating transforms in elements with an displya:inline property, always use inline block elements, so I removed the spans from your markup. This code works HTML <a class="nav-link" href="" id="live"><div class="sitenavTxt">Live</div></a> JS $(".nav-link").each(function(i,e) { var self = $(this), sitenavtxt = self.find(".sitenavTxt"), sitenavtxtSplit = new SplitText(sitenavtxt, {type:"words,chars"}), sitenavtxtChars = sitenavtxtSplit.chars, sitenavTL = new TimelineMax({paused:true}); sitenavTL.staggerFromTo(sitenavtxtChars, 0.1, {color: '#858585'}, {color: '#FFF'}, 0.08); e.hoverTl = sitenavTL; self.hover(function(){ sitenavTL.play(); }, function(){ sitenavTL.reverse(); }); }); Happy Tweening!!
  21. Hi, I'm not sure what events and function you're talking about. There are none in your Draggable instance, except for the snap function and I see everything working OK in small screens. Please set up a sample that clearly shows the events you're having problems with. For using the ThrowProps plugin in codepen, here's the link: http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js
  22. Hi, The issue is that according to the box model spec, the height and width are considered from the top/left corner of the element. Also keep in mind that the transform origin property is for... you got it!! transforms and not size animations, such as width and height. The transform origin will take effect using scales. So you could scale your element in the Y axis from 0 using that transform origin string: TweenLite.from(element, 1, {scaleY:0, transformOrigin:"center bottom"}); Another option is the solution Shaun posted in this thread: http://greensock.com/forums/topic/12283-expand-div-from-bottom-to-top/
  23. Hi and welcome to the GreenSock forums. One solution could be to scrub all the animations to their ends and then to the start again, after the preloading is completed. Then once you did that remove the preloading. That could force the browser at least to do the necessary calculations. Since rendering doesn't seem to be a big problem, as you report that after the first run everything is smoother, perhaps removing the calculations could improve performance. I don't know if you have everything in a single timeline or you have more than one, but at the end this comes to quickly take the animations to their end. var tl = new TimelineLite({paused:true}); tl // add all the instances to the timeline //finally scrub the timeline's playhead to it's end TweenLite.to(tl, 0.5, {progress:1, onComplete:function(){ // once the tween is completed take the timeline back to 0 tl.pause(0); }}); If you have more than one instance you could try exportRoot to do the same. http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/exportRoot/ Another possibility you could explore is lagSmoothing in order to see if that could help: http://greensock.com/gsap-1-12-0 PS: The boss was waayy faster than me
  24. Hi, I thought about adding this link. It's a really nice example Jamie made some time ago, about using the CSS Rule plugin Diaco was talking about, perhaps you can get some ideas out of it: http://codepen.io/jamiejefferson/pen/ibHAt
  25. Hi, In both samples you have errors in your selectors. In the second loop you have this: svgDiv.children('svg').find("path.svganimscroll, rect.svganimscroll, circle.svganimscroll, line.svganimscroll, ellipse.svganimscroll, polyline.svganimscroll, polygone.svganimscroll").each(function(index){ //code }); But in your HTML the class is svganimpath, so changing that in the loop works: svgDiv.children('svg').find("path.svganimpath, rect.svganimpath, circle.svganimpath, line.svganimpath, ellipse.svganimpath, polyline.svganimpath, polygone.svganimpath").each(function(index){ //code }); And it does the initial animation, plus two repeats. In the second sample, the one with ScrollMagic, the second loop runs only once until it finds this code: .setTween(mtl) .addTo(controller); This is throwing the following error: Uncaught TypeError: (intermediate value).setTween is not a function Now that basically means that there's something wrong with your ScrollMagic setup and I don't know the first thing about that particular plugin. Perhaps another user could chime in and give some pointers or you could consult ScrollMagic's docs to find out what could be happening. Finally I couldn't avoid to smile when I read this: Immediately this came to my mind: var thanks; if (solved) { thanks = "Thank You!!"; } else { thanks = "Thank You Anyway!!"; } return thanks + ",<br>Fahim";