Jump to content
GreenSock

Search the Community

Showing results for tags 'gsap'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hey guys! I am working up a new animated banner for my boss's site. I have 4 banners. Each one animated in to view and animated out of view. I just finished all their animations. I commented out the js and html for each individual banner while I worked on the animation. They are strung together as once leangthy animation due to my lack of knowledge with JS and Gsap but think it should work okay. However when I removed all my commented out JS and HTML to string all the animations together to play in "sequence" Every animation except the first example will lag into place and not show the whole animation. I am not really equipt to figure this out. I have no idea why it would act this way. The animations play smoothly when not linked together. You can see an example preview of my project here: http://portalpacific.net/Al/PennyGrab2.1/ And I have also included a zip file here for anyone willing to take a look at help me. http://portalpacific.net/Al/PennyGrab2.1/PennyGrab2.1.zip Thanks so much for your time! Any help at this point is beyond appreciated!
  2. i need to make an animation frame by frame, basically after pressing the mouse the animation starts by changing background image like some kind of stop motion by using this code: document.addEventListener('click', function() { if(counter<1){ audioElement.play(); var cancello=document.getElementById("cancello1"); //var cancello2=document.getElementById("cancello2"); TweenMax.to(cancello, 3, {rotationY:125, transformOrigin:"left top",opacity:0}) TweenMax.to(cancello2, 3, {opacity:0}) contatore++; } else if(counter<2){ TweenLite.set($("#porta"), {css:{backgroundImage:'url(img/KDS_Grafiche29.png)'}}); <--this one audioElement.setAttribute('src', '235.wav'); audioElement.play(); //var porta = document.getElementById("porta"); //TweenLite.to(porta,5,{opacity:1,scaleX:2,scaleY:2}); contatore++; } else if(counter<3){ TweenLite.set($("#porta"), {css:{backgroundImage:'url(img/KDS_Grafiche212.png)'}}); <-- second frame var titolo = document.getElementById("titolo"); TweenLite.to(titolo,2,{opacity:1}); contatore++; } else if (counter<4){ TweenLite.set($("#porta"), {css:{backgroundImage:'url(img/KDS_Grafiche220.png)'}}); <-- third frame } } the problem is that the image flash for second before appearing, also... how can i impost an automatic cycle in which the images appear one by one, since the actual cycle only increases at every click. or there's a better way to do this without using tweenlite.set()?
  3. I have an SVG with a number of drawn paths/lines. How would I go about giving them a very subtle, minor movement effect in the same direction as the cursor that is being dragged across them? For example, if you move your mouse through the lines on the Codepen, they gently and briefly move downward, then return to their original position - almost as if a light breeze had hit them. But how can I make them go whichever direction the mouse passes through? Or maybe even something cooler, like the particles.js repulsion effect? I'm not looking for an entire code solution; just a helping hand to get me started. I'll be updating my Codepen slowly as I work out how to go about this. Thank you in advance.
  4. I've made a small animation test, trying to mimic this simple effect My code is available here and this is a screen-capture recording the results. 4 browsers from left to right: IE11 - a complete mess, not web worthy... then Microsoft Edge 13 - notice a round circle is a bit too much to ask... I used border-radius. Then comes the mighty Google chrome - notice how the animation elements are pixelated during the animation to achieve "performance"... and last is Firefox which is the only browser that delivered a sharp result although the movement was a bit jumpy lacking smoothness and elegance. I've used GSAP which uses a css plugin to animate the css properties via JS. Someone please tell me how this site is looking great even on IE11? It uses the same GSAP animation library as mentioned here... Any thoughts on techniques they may have used to improve the appearance of these animation? Footnote - I didn't add codepen since it didn't run my code correctly. I tried.
  5. Hi, GSAP is really impressive, but I'm searching for a tip to playing with visibility or display in svg. I make a 0s transition but it's look stupid tl.to('#el',0,{autoAlpha:0}); In my codepen I try to wink
  6. I'm trying to animate elements in my webpage by using css3 and gsap library. One of my elements which is my menu item has the following code in css3: .loaded .main-menu .item:nth-child(1){ top:calc(50% - 25px); left:calc(50% - 25px); background-color:green; opacity:0; -webkit-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87); -moz-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87); -o-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87); animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87); } @keyframes moveicon1{ 100%{-ms-transform:translate(0px,-160px) rotate(360deg); -o-transform:translate(0px,-160px) rotate(360deg); -moz-transform:translate(0px,-160px) rotate(360deg); -webkit-transform:translate(0px,-160px) rotate(360deg); transform:translate(0px,-160px) rotate(360deg); opacity:0.8;} } I've done above for all prefixes. And the other hand I wrote these code via gsap based on following code: TweenLite.to('.loaded .main-menu .item:nth-child(1)', 1, {x:0,z:0,y:-160,rotation:360,opacity:0.8, ease:Back.easeOut}); An idea to use both together is using gsap when css3 is not define in client's browser. But I don't want to do it, because gsap has the very good speed. Unfortunately when I use both on same element, browsers who support css3 doesn't animate good via gsap. if (!Modernizr.cssanimations){ // GSAP Codes } I know that gsap and css3 has the same speed But the question is can I use both together and browser run each one that has more speed. So like when the laptop is in Power Saver mode , run the gsap (because its faster in this situation) and when javascript is off run the css3. If it's not possible, help me to recognize when I should use which one? Javascript or css3? Thanks a lot.
  7. Hi, I'm a novice when it come to this stuff but I've recently set up a holding page for a friend of mine and she wanted a video on it. However I found out that a video is no good in iOS devices as it starts off paused, and you have to click to play it. Therefore I started browsing the net to find a solution, which seemed to be to turn the video into an image sequence. Thats when I found this example codepen http://codepen.io/jamiejefferson/pen/aJcGl So I used the Javascript and bits of the CSS to create my code http://codepen.io/anon/pen/pgrQZO . However as you can see it is very glitchy? I've been trying to iron out the flickering but with no luck. Any ideas how to smooth it all out, as I'm really stuck!? Many Thanks in advance for any help! http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/
  8. Hi team, this should be an easy one. I have two timelines the main timeline (mainTL) and a separate 'loop' timeline (overTL), which is paused, but not added to the main Timeline. I want to cue overTL to start at a specific point on the main timeline. But I can't find what the syntax is to do this – just to move ahead was forced to use the onComplete callback to play 'overTL'. var overTL = new TimelineMax({paused: true, repeat: -1}); var mainTL = new TimelineMax(); overTL .to('#element', 1, {property:value}) (etc...); // MY FUNCTION FOR PLAYING IT so I can use it from mainTL function playIt(timeline, offset){ timeline.play(offset); } mainTL .set('#neon', {scale: 0.1, transformOrigin: 'center center'}, 'startDust') // CUE overTL at this point .set({}, {onComplete: playIt, onCompleteParams:[overTL, 0]}, 'startDust') .to('#neonfade', 1, {opacity: 0},'startDust+=0.3') (mainTL continues ...); I created a function to do it, but just wondered if there is a more straightforward way to get this working in Greensock? There must be!! Kind of like what I used to do in flash where you would start a movieClip loop at a specific point in your main animation. I would like to be able to completely cue this timeline from the main timeline as needed – pause, reverse, seek etc. But obviosuly don't want to have to write a custom function for each of these if its already part of the plugin. Sorry I'm sure this must be obvious, thanks.
  9. Hello, I am working with a banner that is 970x418. I am trying to create a parallax effect on y-scroll (drag). In order to do this, I assume that: 1) I need to create a "container div" with a "foreground div" and "background div," foreground on top of the background. 2) Set the container itself to scroll/drag and affect both div's together. 3) Change the speed the background div to be a little slower, in order to give the parallax illusion. So far, I haven't found anything that shows me how to work with dragging one item and using the info of that item to affect the positioning of another. I've seen sites that give code libraries like scrollMagic, but they are not easy when it comes to finding out how to do specific things, only what is shown in their examples. Please help.
  10. Hi there, i love GSAP and use it in every project! I have a question, is there some "patterns" for common animations, like flip in x, or fade from bottom, fade and rotate In, bounce in left... you know, common animations to use right out of the box? For example, i know that this fade in from bottom: TweenMax.from(".element", 1, {autoAlpha:0, y:"50%", ease:Power2.easeOut}); Thanks guys, your are great!
  11. Hi folks, I am creating my prototype in Framer.js and using GSAP to animate the SVG in it. However the SVG inserted aren't detectable. Hence GSAP can't animate it? But I check the DOM, they are there. Weird? Framer.js spinner = new Layer({ width: 207, height: 207, backgroundColor: 'transparent' }); spinner.html = '<svg id="dots" xmlns="http://www.w3.org/2000/svg" width="207" height="207" viewBox="0 0 207 207">' + '<path id="top" d="M103,1A12,12,0,1,1,91,13,12,12,0,0,1,103,1Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' + '<path id="right" d="M193,91a12,12,0,1,1-12,12A12,12,0,0,1,193,91Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' + '<path id="bottom" d="M103,181a12,12,0,1,1-12,12A12,12,0,0,1,103,181Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' + '<path id="left" d="M13,91A12,12,0,1,1,1,103,12,12,0,0,1,13,91Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' + '</svg>'; GSAP function getSpinnerTimeline(){ var tl = new TimelineMax(); tl.to('#dots', 1, {rotation: 90}) .to('#top', 1, {y: 10, repeat: 1, yoyo: true}, 0) .to('#bottom', 1, {y: -10, repeat: 1, yoyo: true}, 0) .to('#left', 1, {x: 10, repeat: 1, yoyo: true}, 0) .to('#right', 1, {x: -10, repeat: 1, yoyo: true}, 0); return tl; } var mtl = new TimelineMax(); mtl.add(getSpinnerTimeline()); mtl.timeScale(2.5); mtl.play(); If I insert my SVG into HTML directly, it works like a charm. If I insert my SVG using jQuery, it works like a charm. But when I combine Framer.js + GSAP it doesn't work. Here I attach a screenshot of the generated DOM. The SVG with the id(s) are there.
  12. Hi everyone, I am new to using GSAP, but have used (the timeline) in Flash heavily. I've read the documentation and tried to follow it. For my first project using GSAP, I built a small banner ad to test some of the functionalities. It can be seen here: http://codepen.io/anon/pen/bEBxBB As for now, I have some questions about my code: 1. (How) can I chain the .set into one large string (so that they are all set at once)? For example: TweenLite.set("#box", {x:52, y:57}).set("#shadow", {x:127, y:52, autoAlpha:0}); Is this even possible? 2. I would like to move the #box, #shadow, #pack and #line simultaneously to the left, but in the code provided the animations start when the one before is finished... How can I fix this? Is it possible to be chained as well? tl.to("#box", .5, {x:-25, y: 62, scale: 0.72, rotation:0.001, ease:Power2.easeInOut}); tl.to("#shadow", .5, {x:55, y: 58, scale: 0.72, rotation:0.001, ease:Power2.easeInOut}); tl.to("#pack", .5, {x:70, y: 76, scale: 0.72, rotation:0.001, ease:Power2.easeInOut}); tl.to("#line", .5, {x:-10, y: 170, scale: 0.72, rotation:0.001, ease:Power2.easeInOut}); 3. If you have any other remarks, tips, optimisations or observations about my code, don't hesitate to give me a heads up! Thanks in advance for all your (kind) help!
  13. Hey, I've wondered on how you can use GSAP with Angular2 if anyone here have done that. I loaded the TimelineMax.min.js in my main index.html-file, but having problem importing it into a component. My component look like this: import {Component} from 'angular2/core'; //import {TweenLite} from 'gsap/src/minified/TweenLite.min.js'; //import {TimelineMax} from 'gsap/src/minified/TimelineMax.min.js'; //import {TL} from 'gsap/src/minified/TimelineMax'; import {TL} from 'gsap/src/uncompressed/timelinemax'; @Component({ selector: 'opning', templateUrl: './components/opning/opning.html', styleUrls: ['./components/opning/opning.css'] }) export class OpenCmp { constructor() { console.log("played"); console.log(TL); // console.log(TweenLite); // var tl = new TimelineMax(); /*var logo = $("#logo"); tl.from(logo, 4, { z: 500, y: 74, visibility: "visible" }); //tl.from(logo, 2, { left: "632px" }); tl.play(); */ } } I installed gsap with npm install gsap so it is in my projects /node_modules/ . Have tried several approaches, but i can not set tl = New TimelineMax() in that typescript class and I dont know how to load\import it. Anyone done this with angular2 ? I used this as my starting point: https://github.com/mgechev/angular2-seed
  14. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Since launching MorphSVGPlugin, we've made a bunch of improvements and exposed several new features. Here are the highlights... The challenge Before we dive into solutions, it helps to understand the tasks that MorphSVGPlugin must perform in order to work its magic: Convert the path data string into pure cubic Beziers Map all of the segments between the start and end shapes (match them up), typically based on size and position If there are more segments in one than the other, fabricate new segments and place them appropriately Subdivide any segments with mis-matching point quantities If a shapeIndex number isn't defined, locate the one that delivers the smoothest interpolation (shortest overall distance that points must travel). This involves looping through all the anchor points and comparing distances. Convert all the data back into a string Isolate the points that need to animate/change and organize a data structure to optimize processing during the tween. That may sound like a lot of work (and it is) but MorphSVGPlugin usually rips through it with blazing speed. However, if you've got a particularly complex path, you'll appreciate the recent improvements and the new advanced options: Performance tip #1: define a shapeIndex MorphSVGPlugin's default shapeIndex:"auto" does a bunch of calculations to reorganize the points so that they match up in a natural way but if you define a numeric shapeIndex (like shapeIndex:5) it skips those calculations. Each segment inside a path needs a shapeIndex, so multiple values are passed in an array like shapeIndex:[5,1,-8,2]. But how would you know what numbers to pass in? The findShapeIndex() tool helps for single-segment paths, what about multi-segment paths? It's a pretty complex thing to provide a GUI for. Typically the default "auto" mode works great but the goal here is to avoid the calculations, so there is a new "log" value that will act just like "auto" but it will also console.log() the shapeIndex value(s). That way, you can run the tween in the browser once and look in your console and see the numbers that "auto" mode would produce. Then it's simply a matter of copying and pasting that value into your tween where "log" was previously. For example: TweenMax.to("#id", 1, {morphSVG:{shape:"#otherID", shapeIndex:"log"}}); //logs a value like "shapeIndex:[3]" //now you can grab the value from the console and drop it in... TweenMax.to("#id", 1, {morphSVG:{shape:"#otherID", shapeIndex:[3]}}); Notes shapeIndex:"log" was added in MorphSVGPlugin version 0.8.1. A single segment value can be defined as a number or a single-element array, like shapeIndex:3 or shapeIndex:[3] (both produce identical results) Any segments that don't have a shapeIndex defined will always use "auto" by default. For example, if you morph a 5-segment path and use shapeIndex:2, it will use 2 for the first segment and "auto" for the other four. Performance tip #2: precompile The biggest performance improvement comes from precompiling which involves having MorphSVGPlugin run all of its initial calculations listed above and then spit out an array with the transformed strings, logging them to the console where you can copy and paste them back into your tween. That way, when the tween begins it can just grab all the values directly instead of doing expensive calculations. For example: TweenMax.to("#id", 1, {morphSVG:{shape:"#otherID", precompile:"log"}}); //logs a value like precompile:["M0,0 C100,200 120,500 300,145 34,245 560,46","M0,0 C200,300 100,400 230,400 100,456 400,300"] //now you can grab the value from the console and drop it in... TweenMax.to("#id", 1, {morphSVG:{shape:"#otherID", precompile:["M0,0 C100,200 120,500 300,145 34,245 560,46","M0,0 C200,300 100,400 230,400 100,456 400,300"]}}); As an example, here's a really cool codepen by Dave Rupert before it was precompiled: http://codepen.io/davatron5000/pen/meNOqK/. Notice the very first time you click the toggle button, it may seem to jerk a bit because the entire brain is one path with many segments, and it must get matched up with all the letters and figure out the shapeIndex for each (expensive). By contrast, here's a fork of that pen that has precompile enabled: http://codepen.io/GreenSock/pen/MKevzM. You may noticed that it starts more smoothly. Notes precompile was added in MorphSVGPlugin version 0.8.1. Precompiling only improves the performance of the first (most expensive) render. If your entire morph is janky throughout the tween, it most likely has nothing to do with GSAP; your SVG may be too complex for the browser to render fast enough. In other words, the bottleneck is probably the browser's graphics rendering routines. Unfortunately, there's nothing GSAP can do about that and you'll need to simplify your SVG artwork and/or reduce the size at which it is displayed. The precompiled values are inclusive of shapeIndex adjustments. In other words, shapeIndex gets baked in. In most cases, you probably don't need to precompile; it's intended to be an advanced technique for squeezing every ounce of performance out of a very complex morph. If you alter the original start or end shape/artwork, make sure you precomple again so that the values reflect your changes. Better segment matching In version 0.8.1, there were several improvements made to the algorithm that matches up corresponding segments in the start and end shapes so that things just look more natural. So even without changing any of your code, loading the latest version may instantly make things match up better. map: "size" | "position" | "complexity" If the sub-segments inside your path aren't matching up the way you hoped between the start and end shapes, you can use the map special property to tell MorphSVGPlugin which algorithm to prioritize: "size" (the default) - attempts to match segments based on their overall size. If multiple segments are close in size, it'll use positional data to match them. This mode typically gives the most intuitive morphs. "position" - matches mostly based on position. "complexity" - matches purely based on the quantity of anchor points. This is the fastest algorithm and it can be used to "trick" things to match up by manually adding anchors in your SVG authoring tool so that the pieces that you want matched up contain the same number of anchors (though that's completely optional). TweenMax.to("#id", 1, {morphSVG:{shape:"#otherID", map:"complexity"}}); Notes map is completely optional. Typically the default mode works great. If none of the map modes get the segments to match up the way you want, it's probabaly best to just split your path into multiple paths and morph each one. That way, you get total control. Animate along an SVG path The new MorphSVGPlugin.pathDataToBezier() method converts SVG <path> data into an array of cubic Bezier points that can be fed directly into a BezierPlugin-based tween so that you can essentially use it as a motion guide. Watch the video Demo See the Pen pathDataToBezier() docs official by GreenSock (@GreenSock) on CodePen. Morph back to the original shape anytime If you morph a path into various other shapes, and then you want to morph it back to its original shape, it required saving the original path data as a variable and feeding it back in later. Not anymore. MorphSVGPlugin records the original path data in a "data-original" attribute directly on the element itself, and then if you use that element as the "shape" target, it will automatically grab the data from there. For example: TweenMax.to("#circle", 1, {morphSVG:"#hippo"}); //morphs to hippo TweenMax.to("#circle", 1, {morphSVG:"#camel"}); //morphs to camel TweenMax.to("#circle", 1, {morphSVG:"#circle"}); //morphs back to circle. Conclusion We continue to be amazed by the response to MorphSVGPlugin and the creative ways we see people using it. Hopefully these new features make it even more useful. How do I get MorphSVGPlugin? If you're a "Shockingly Green" or "Business Green" Club GreenSock member, just download the zip from your account dashboard or the download overlay on GSAP-related page on this site. If you haven't signed up for Club GreenSock yet, treat yourself today.
  15. WANTED: An Experienced HTML5/JS Web Developer (who also specializes in using GSAP) Greetings GSAP Community, =D I am in the market for an experienced responsive, interactive, and/or animation web developer, who also considers themselves an expert in using GSAP? I am inexperienced in this field, but after researching to find exceptional information and reading many positive reviews holding GSAP in high regard, I am interested in hiring an experienced web developer to help bring an all-natural fully-layered vector map illustration to life on the web using GSAP? Basically, we have created an all-natural fully-layered vector map (perspective) illustration of an entire city/community/town/beach resort areas, but would love for it to have some constant moving elements and interactive elements to allow our target audience to become educated of how our business services operates? By chance, would anyone in the GSAP community forum have any recommendations on best way for us to find such a developer? Thank you very much for taking a few moments of your time to read my request for support in this matter and look forward to hearing from you. =) With Warmest Regards, Christopher
  16. Please, could You explain me why the rotationX params doesn't fit like rotationY & rotationZ in my 3D cube test?
  17. I need some help with animating certain parts of my svg image when clicked on another part of the svg image. This is what I'm trying to do: When you click on one of the smaller buttons, for example the yellowbutton, the yellowblock will appear (with opacity: 1) and the other coloured blocks will dissapear (with opacity: 0). When you click on the orangebutton, the orangebutton will appear and the other coloured blocks will dissapear etc. etc. I think I'm on the right track but something isn't working.
  18. I've been at this for a few days now (starting with Skrollr and now ScrollMagic), and I just can't figure it out: If I create an SVG animation - it completes 100% on my laptop screen. If I view the animation on a larger screen (with more viewport height), the animation doesn't complete (unless I allow the viewport to go beyond the footer, creating blank space). My question is this: how should I use ScrollMagic trigger points in a responsive design where the height of the viewport changes? I initially thought that I could trigger them on the percentage that the actual scrollbar has been scrolled - thus keeping everything in proportion (ie, fire SVG line when the scrollbar has been scrolled 50%), but it seems like this is not the case. If anyone could provide clarification on this, I would REALLY appreciate it! ps, I can create a CodePen if needed - though this is quite a general question that will be applied to animations throughout the site.
  19. I have a question on the SplitText and ScrambleText plugins, which were briefly covered in Carl's (awesome) course last week. Is it possible to randomize the order of the animating type? For example, if I am using SplitText to spell "ANIMATE" character-by-character, is there a way to not have it animate 'A' then 'N' then 'I' etc?
  20. Hi there. I'm trying to call some code on an interaction, for example,on a close button click, but I want the code to execute only if certain conditions are met. I think I might have formatted that portion (the if statements) as AS3 (as that's what I'm more comfortable with). Can you take a look and tell me why my if statements aren't firing? It's a huge piece so a codepen would be tricky to recreate, but here is the code in question, hopefully it's enough to solve: function minimizeShoe() { //TweenMax.set("#plus1", {css:{zIndex:501}}); TweenMax.to("#panel2_box1", .35, {scaleX:0.334, scaleY:0.334, top:-17, left:0, delay:.2, transformOrigin:"left bottom", onComplete:layerShoe}); TweenMax.to("#panel2_info1", .15, {y:"+=128", delay:.1, force3D:false}); TweenMax.to("#plus1", .35, {y:"+=386", delay:.2}); TweenMax.to("#plus1_2", .35, {rotation:"-=90", delay:.2}); scale1.removeEventListener('click', minimizeShoe, false); } function minimizeJacket() { //TweenMax.set("#plus2", {css:{zIndex:501}}); TweenMax.to("#panel2_box2", .35, {scaleX:0.334, scaleY:0.334, top:-17, left:167, delay:.2, transformOrigin:"left bottom", onComplete:layerJacket}); TweenMax.to("#panel2_info2", .15, {y:"+=128", delay:.1, force3D:false}); TweenMax.to("#plus2", .35, {y:"+=386", x:"+=168", delay:.2}); TweenMax.to("#plus2_2", .35, {rotation:"-=90", delay:.2}); scale2.removeEventListener('click', minimizeJacket, false); } function minimizeFitbit() { //TweenMax.set("#plus3", {css:{zIndex:501}}); TweenMax.to("#panel2_box3", .35, {scaleX:0.334, scaleY:0.334, top:-17, left:333, transformOrigin:"left bottom", onComplete:layerFitbit}); TweenMax.to("#panel2_info3", .15, {y:"+=117", delay:.1, force3D:false}); TweenMax.to("#plus3", .35, {y:"+=386", x:"+=336"}); TweenMax.to("#plus3_2", .35, {rotation:"-=90"}); scale3.removeEventListener('click', minimizeFibit, false); } function layerShoe() { scaleText1.style.display = "none"; TweenMax.set("#plus2", {css:{zIndex:501}}); TweenMax.set("#plus3", {css:{zIndex:501}}); TweenMax.set("#panel2_box1", {css:{zIndex:500}}); scale1.addEventListener('click', scaleShoe, false); scale2.addEventListener('click', scaleJacket, false); scale3.addEventListener('click', scaleFitbit, false); expandBtn1.addEventListener('click', scaleShoe, false); expandBtn2.addEventListener('click', scaleJacket, false); expandBtn3.addEventListener('click', scaleFitbit, false); } function layerJacket() { TweenMax.set("#plus1", {css:{zIndex:501}}); TweenMax.set("#plus3", {css:{zIndex:501}}); scaleText2.style.display = "none"; TweenMax.set("#panel2_box2", {css:{zIndex:500}}); scale1.addEventListener('click', scaleShoe, false); scale2.addEventListener('click', scaleJacket, false); scale3.addEventListener('click', scaleFitbit, false); expandBtn1.addEventListener('click', scaleShoe, false); expandBtn2.addEventListener('click', scaleJacket, false); expandBtn3.addEventListener('click', scaleFitbit, false); } function layerFitbit() { TweenMax.set("#plus2", {css:{zIndex:501}}); TweenMax.set("#plus1", {css:{zIndex:501}}); scaleText3.style.display = "none"; TweenMax.set("#panel2_box3", {css:{zIndex:500}}); scale1.addEventListener('click', scaleShoe, false); scale2.addEventListener('click', scaleJacket, false); scale3.addEventListener('click', scaleFitbit, false); expandBtn1.addEventListener('click', scaleShoe, false); expandBtn2.addEventListener('click', scaleJacket, false); expandBtn3.addEventListener('click', scaleFitbit, false); } function ifStatements(){ if(scale1.position().y == 0) { minimizeShoe(); } if(scale2.position().y == 0) { minimizeJacket(); } if(scale3.position().y == 0) { minimizeFitbit(); } } function exitHandler(){ ifStatements(); } scale1, scale2, and scale3 are all variables of divs that get moved to the top - I want that checked with the if statement, and then it minimized using the minimize function I've created. It's all working great except the if statements they aren't executing properly. Hopefully this makes sense what I'm asking!
  21. Hello Everyone, Please help me with advice / best practice for html5 ad development. I have been trying to find some "summ-up post" showing "what goes where", but could not find any, I appologize. My trouble: I convinced the client to move from swf to html5 banners, followed Chris Gannon's example and developed html5 ads for Google AdWords. When uploading the ads data, client got the error: "Uploaded ad includes html5 code we can not approve: script. Please …" The error call is not very helpful for me, I don't see clearly where to fix this. I am using svg file, hosted image, GSAP TweenMax, I followed google image ads guidelines, wrapped svg in html file, then put svg, minified TweenMax.js and html file in *.zip Here is code I use for html wrapper: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="ad.size" content="width=300,height=250"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>IDSYS</title> <style> .banner {position: relative} .banner300x250{width: 300px; height: 250px} .banner120x600 {width: 120px; height: 600px} .banner160x600 {width: 160px; height: 600px} .banner728x90 {width: 728px; height: 90px} </style> </head> <body> <object type="image/svg+xml" data="IDSYS_a300x250.svg" class="banner banner300x250"> <!-- <param id="clickTag" value="www.idsys.cz" /> --> </object> </body> </html> sample zip with SVG, html and js files attached to this post: IDSYS_a300x250.zip If anyone could find some time, please help. Best wishes, kuba
  22. Am using gsap inside createjs/canvas if I have a ball, for example, tweening in diagonally, from top left to bottom right, say, with an easing bounce when it hits the bottom of the canvas, the bounce goes up and down, as I want, but also bounces backwards towards the left, when what I want in this case is for the bounce to go to the right. Is there a simple way to achieve that? Thanks
  23. It seems that one of the advantages of nesting Timelines is so you can re-use an animation, but if I try to .add() or .append() a nested timeline twice, the first one is ignored and only the last one animates. I forked Carl's "Use .add() to Nest Timelines" codepen (thanks Carl, you rock) and simply repeated one of the .add() lines, changing the JS from: var masterTimeline = new TimelineLite(); masterTimeline .add(box1Timeline) .add(box2Timeline) .add(box3Timeline); to: var masterTimeline = new TimelineLite(); masterTimeline .add(box1Timeline) .add(box2Timeline) // this won't animate when there's a duplicate below .add(box3Timeline) .add(box2Timeline); // comment this out and the earlier one will animate But apparently if you repeat any nested timeline .add(), the first instance will no longer animate, only the last one will. Also I noticed that the parent timeline does wait for the duration of the nested timeline as if everything's running fine, which makes me think it's some kind of rendering or overwrite issue. I'd love to understand what the problem is so I can figure out a solution or a workaround. Thanks!
  24. Hi, guys. I am quite new to GSAP. The system is really solid, however, I ran into a small problem. I am trying to animate the X property of the the main container and text in it. Basically, I want to make a nice slide out menu. THE PROBLEM: The black background slides out really nicely, BUT, the text starts sliding out as normal, but then jumps at the end as if it was skipping something. I cannot figure out what is causing that. I would be really grateful If someone helped me out, because I feel like I am missing something really fundamental here. Here is the code: Codepen: http://codepen.io/arthurleonov/pen/ZbPrLX var menu = $('.js-menu'), menuContainer = $('.menu-container'), menuItems = $('.js-menu-items h3 a'); var tl = new TimelineMax({ paused: true, reversed: true, }); // set new timelinemax // container animation tl.from(menuContainer, 3, { x: '-1000', autoAlpha: 0, force3D: true, ease: Power3.easeOut }) // text animation tl.from(menuItems, 2, { x: '-600', autoAlpha: 0, force3D: true, ease: Expo.easeOut }); // toggle animation $(menu).on('click', function() { tl.reversed() ? tl.play() : tl.reverse(); }); Thanks in advance!
  25. Hello all, I am new to GreenSock and the forum. I must say I am loving it! We are doing a Cordova mobile app with React. We started using GSAP for all the animations. This works great in Ripple and also physical Android devices. Even older Android devices, which we were sure were going to be a problem, everything is running super smooth. The problem is with iOS devices. We have tried iPhone 5S with both iOS 8.x.x and 9.x and also iPhone 6 and 6 Plus and on all of them performance is really bad. Animations are chopping up and stuttering all over the place. I tried adding the translate3d transform and also adding force3D to the options object and nothing helps. In the codepen the red div slides down more than one screen length and I know this is a lot of pixels to animate, but what works fine on an S3 I would expect to work better on an iPhone 6. Any tips for me? Thanks!
×