Jump to content
Search Community

Search the Community

Showing results for tags 'canvas'.

  • 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

  • Learning Center
  • Blog

Categories

  • Products
  • Plugins

Categories

  • Examples
  • Showcase

Categories

  • FAQ

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. Hello there! First of all, thank so much for such an amazing library. I can't stop recommending it. We integrated gsap on our project in order to handle better the timings and make our code much easier and performant. I will share the temporary url with you so you can take a look: http://lab.pre.rtve.es/el-cuento/ We are getting good results on desktop, however, not so much on mobile devices. It gets all laggy sometimes and the animations start to suffer delays. How could I improve performance for mobile devices? I have been trying to set the framerate on Tweenmax ticker to 60fps, I tried force3D:true on all our translate/rotate/scale animations but still cant see a proper improvement... Do you think I made a bad choice and this is too many animations for a mobile device? We are only animating our character, doing translates, rotations, scale, and svg morphing using Snap.svg. We have a function that takes an array of svg groups (parts of our character) and goes one by one throwing snap svg morphs in order to make, for example, the whole mouth move from one type to another. Thank you very much for your help, Ricardo
  2. Obviously I control nothing that DCM uses to insert banner ads, and yes I am bending the DCM vs DCRM rules (video equals Rich Media). The horizontal scroll is really wide, the vertical about 10 pixels. That being said does anyone see anything that jumps out at them. <style type="text/css" style="display: none !important;"> * { margin: 0; padding: 0; } body { overflow-x: hidden; } #wrapper{ position: relative; width: 300px; height:250px; z-index: 1; } #player { top:55px; left:8px; width: 280px; position: absolute; } </style> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> <script src="mealKit_300x250_youtube_noZindex_TS.js?1493820012728"></script> <script> var canvas, stage, exportRoot; function init() { // --- write your JS code here --- canvas = document.getElementById("canvas"); exportRoot = new lib.mealKit_300x250_youtube_noZindex_TS(); stage = new createjs.Stage(canvas); stage.addChild(exportRoot); stage.enableMouseOver(); createjs.Ticker.setFPS(lib.properties.fps); createjs.Ticker.addEventListener("tick", stage); } </script> <!-- write your code here --> <script type="text/javascript">var clickTag = "https://www.google.com";</script> </head> <body onload="init();" style="background-color:#D4D4D4;margin:0px;"> <div id="wrapper"> <div id="player"></div> <canvas id="canvas" width="600" height="500" style="background-color:rgba(205, 152, 101, 1.00); width:300px; height:250px" onclick="javascript:window.open(window.clickTag)"></canvas> </div> <script> // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '154', width: '250', videoId: 'XAtmYu0bbKo', playerVars: { 'autoplay': 1, 'modestbranding':1, 'controls': 1, 'fs': 0, 'rel': 0 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } var playerReady = false; // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { playerReady = true; player.mute(); } // 5. The API calls this function when the player's state changes. // The function indicates that when playing a video (state=1), // the player should play for six seconds and then stop. function onPlayerStateChange(event) { if (event.data == YT.PlayerState.ENDED) { <!-- alert('done'); --> } } </script>
  3. Carl brought up this canvas morphing demo I made... http://codepen.io/osublake/pen/RWeOWX But it's kind of old, so I told him I would make an updated version because doing canvas morphing is much easier now. You no longer have to use an actual SVG path as a proxy to get the transformed path strings. There's an undocumented method that the precompile option uses (pathFilter), so you a can tap into that to get the transformed path strings. // Path strings var path1 = "M300,25l86.6,150H213.4Z" var path2 = "M500,23.92L524.72,74,580,82l-40,39,9.44,55.05-49.44-26-49.44,26L460,121,420,82l55.28-8Z"; // Data for the start and end paths var pathData = [path1, path2]; // Run it through the MorphSVGPlugin MorphSVGPlugin.pathFilter(pathData); Using the pathFilter method might seem awkward at first because it doesn't return anything. It mutates the array you pass into it with the transformed path strings... http://codepen.io/osublake/pen/1754cdf8805e7061094036125958200d?editors=0011 There are also some other things you can pass in the pathFilter method, like a shapeIndex and map type... MorphSVGPlugin.pathFilter(pathData, 6, "complexity"); The next step is to decide on how you want to tween the pathData. In the past I would convert the pathData strings into a bunch of arrays of numbers, and tween the arrays using the EndArrayPlugin, kind of like in this demo I made before the MorphSVGPlugin came out... http://codepen.io/osublake/pen/RPKdQz?editors=0010 But that can get messy, and there's a much better solution with modern browsers, the Path2D object. It will allow you to use SVG paths directly inside of canvas. var path = new Path2D("M10 10 h 80 v 80 h -80 Z"); context.fill(path); And since GSAP can tween complex strings, we now have a pretty straightforward way to do morphing inside canvas! http://codepen.io/osublake/pen/EZNMEZ/?editors=0010 However, there is one issue. There won't be any IE support for this, and the SVG constructor feature is currently broken in Edge. Hopefully that will get resolved soon. https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8438884/ So there you go. High-performance morphing using GSAP and canvas. Morphing 50 different shapes while using a blend mode. http://codepen.io/osublake/pen/pRNYRM/?editors=0010 .
  4. Mr P

    Exporting timelines

    Ok my question is sort of related to this so just put it out there for reference: https://greensock.com/forums/topic/14782-exportimport-timelinestweens-to-json/ I have been using fabric.js with GSAP to create an app to make animations. I have run into a problem where i need to save animation in the db. I am saving my canvas as a JSON. Then the way i went about saving the saving the timeline is by just saving the whole timeline object. I think the saving is working (tell me if I am wrong?) but I think its the fact that the timeline doesn't see the reloaded canvas and its objects as the same. ?? If so what about the ideal solution here. Btw I am very new to GSAP and I am using for my project and love it so far. The fact that I am new I could be missing something very obvious and so far the forums have been helpful with the answers already up and now I am hoping someone can help me with my mine. Thanks in Advance. Regards, Mr P
  5. Hello, I have 9 svgs takes fullpage at each, each svg contains several elements, runs about 6 seconds to complete. On computer everything works great, but on mobile it starts to slow down , even on iPad pro 12.9. (so slow). My site has 9 svgs, each takes fullpage, you can scroll to see different animation. Here is my site: https://rockmandash.github.io/InteractiveInfographic/ If you open the url on computer, it will load pc version svg and code, otherwise it will load mobile version svg and code XD. Here is a svg animation code look like: tlScene02.from($svg02topLine, 0.6, topLineParameter, 0.5) .from($svg02bottomLine, 0.6, bottomLineParameter, 0.5) .from($svg02Heading, 0.3, HeadingParameter, 0.7) .from($svg02subHeading, 0.4, subHeadingParameter, 0.8) .from($svg02Bg, 0.4, { y: -100, opacity: 0 }, 0.9) .from($svg02Door, 0.4, { y: -100, opacity: 0 }, 1) //---------------------------港澳 .to($svg02PeopleHongKongAndMacao, 0.7, { y: 190, opacity: 1, ease: Power1.easeIn }, 1.4) .to($svg02PeopleHongKongAndMacao, 0.7, { x: -90, ease: Power1.easeOut }, 2.1) .from($svg02BubbleHongKongAndMacao, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 2.8) .from($svg02LineHongKongAndMacao, 0.1, { y: 3, opacity: 0 }, 2.9) .from($svg02TextHongKongAndMacao, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3) .from($svg02FlagHongKong, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.1) .from($svg02FlagMacao, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.2) .call(animateNumberIncreasing, [$svg02NumberHongKongAndMacao, 14.5, 1, 'percent']) //14.5 % .from($svg02NumberHongKongAndMacao, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3.5) //---------------------------中國 .to($svg02PeopleChina, 0.7, { y: 70, opacity: 1, ease: Power1.easeIn }, 1.9) .to($svg02PeopleChina, 0.7, { x: -140, ease: Power1.easeOut }, 2.6) .from($svg02BubbleChina, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.3) .from($svg02LineChina, 0.1, { y: 3, opacity: 0 }, 3.4) .from($svg02TextChina, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3.5) .from($svg02FlagChina, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.6) .call(animateNumberIncreasing, [$svg02NumberChina, 40.1, 1, 'percent']) //40.1 % .from($svg02NumberChina, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3.9) //---------------------------日本 .to($svg02PeopleJapan, 0.7, { y: 80, opacity: 1, ease: Power1.easeIn }, 2.4) .to($svg02PeopleJapan, 0.7, { x: 130, ease: Power1.easeOut }, 3.1) .from($svg02BubbleJapan, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.8) .from($svg02LineJapan, 0.1, { y: 3, opacity: 0 }, 3.9) .from($svg02TextJapan, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 4) .from($svg02FlagJapan, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.1) .call(animateNumberIncreasing, [$svg02NumberJapan, 15.6, 1, 'percent']) //15.6 % .from($svg02NumberJapan, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 4.4) //---------------------------東南亞 .to($svg02PeopleSoutheastAsia, 0.7, { y: 200, opacity: 1, ease: Power1.easeIn }, 2.9) .to($svg02PeopleSoutheastAsia, 0.7, { x: 115, ease: Power1.easeOut }, 3.6) .from($svg02BubbleSoutheastAsia, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.3) .from($svg02LineSoutheastAsia, 0.1, { y: 3, opacity: 0 }, 4.4) .from($svg02TextSoutheastAsia, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 4.5) .from($svg02FlagSingapore, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.6) .from($svg02FlagThai, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.7) .from($svg02FlagMalaysia, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.8) .from($svg02FlagPhilippines, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.9) .from($svg02FlagVietnam, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 5) .call(animateNumberIncreasing, [$svg02NumberSoutheastAsia, 13.7, 1, 'percent']) //13.7 % .from($svg02NumberSoutheastAsia, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 5.3) .from($svg02BottomText, 0.4, BottomTextParameter, 5.2); You can see my site is almost complete, but I really don't like the low speed on mobile. All the animation done inside svg so I think I probably can not cache them as png or wrap them as div? So I was thinking moving to canvas will get better? I haven't try it yet. Please help, thank you! update: I think canvas is much more worse, so my problem stick to svg mobile performance issues.
  6. Hi, I try to animate a lot of canvas shapes created with Easeljs and animate with timelineMax. The animation is too slow, the demo is here http://codepen.io/nicmitch/pen/jyKPqy . I think I do something wrong but I do no what. Any suggestion?
  7. Hi, i'm trying to get tweenmax bezier tween fit with a canvas quadraticCurve. The canvas QuadraticCurve is supposed to draw the trajectory of a tweening object. That curve datas are given by BezierPlugin.bezierThrough So far, start and end point seems to fit, but the canvas bezier curve middle point is higher than the tween bezier curve. Could please someone help me understand what i'm doing wrong?
  8. Hi all! Super excited to share with you my new article which was just published on CSS-Tricks: https://css-tricks.com/using-gsap-animate-game-ui-canvas/ Let me know if you have any questions
  9. Hey guys! I have something I'd like to implement which you could consider to effectively be a floor plan for a venue. I've advocated GSAP for a while now and so thought I'd explore what was available for it. I like the look of draggable a lot. Effectively I'd like some advice. I want to create an area on the screen and that can zoom/pan and allow me to add elements to a grid in the form of differently shaped tables. The size of the floor can grow (ad infinitum) depending on the positioning of tables, but there will always in practical terms be boundaries to the floor. A table may have dimensions of let's say 5x5 (as in grid squares) and I would like to be able to drag & rotate them as part of Angular 2 app, with them snapping to the grid. Draggable has a lot of the features I require. I'm wondering whether anyone thinks I could suitably achieve this solely with draggable and a bit of vanilla JS, whether using draggable alongside canvas/webGL would be more appropriate, or whether it wouldn't fit my needs at all. Any recommendations here would be greatly appreciated. I would love it if anyone knew of any examples like this too, I've searched around but not found anything too similar as yet. Many thanks, Alex
  10. Hello, We've been scratching our heads on the following problem for a few days now and wonder if someone can help. We have a series of elements (dots in this case) and attempting to create a sort of fisheye effect where the dots at a certain point in the screen get larger. I've created the following Codepen, that shows the type of effect we are trying to achieve. (Though the grouping needs tightening up) https://codepen.io/Seanom/pen/qaKBXX I toyed with the duration but found that if the user scrolls too fast then events are skipped. I really like the animation effect on the above pen but it has been pointed out that we don't know the height of these pages so in theory adding 5000+ dom elements to a page and then animating them all using scroll magic and GSAP could be a performance issue. We have started to move this over to canvas as think that may handle the redraw events in a more effective way. This is very much a work in progress but shows where I am up to at the moment. I have attempted to call a tweenmax.to and animate the dots as they are redrawn but the animation occurs once per page load. https://codepen.io/Seanom/pen/YGvzgO?editors=1010 Is it possible to have the animation trigger each time the canvas redraws the dots. Hopefully that makes some sense, if it does can anyone help or point me towards some useful material. Thanks in advance Sean I've gone over the following threads, but have not been able to apply anything I could get to work http://greensock.com/forums/topic/7393-how-do-i-reset-a-tween/ http://greensock.com/forums/topic/11740-advice-on-scrollmagic-timelinemax-collisiondetection/ http://greensock.com/forums/topic/7996-engine-update-frequency/ http://greensock.com/forums/topic/7786-how-can-i-hijack-requestanimationframe/
  11. Any ideas on improving quality of text in an HTML5 Canvas ad from Adobe Animate CC? All text looks a bit fuzzy when publishing. Google search mentioned stage.snapToPixelEnabled = True; That helped a bit but our Campaign Managers are expecting a higher quality. There are tons of other scripts to scale the stage up and down which are actually mystifying to me. Not sure where to plug these methods into the .html and .js that Animate CC generates. Thanks in advance for the amazing brains out there. -Ray
  12. Recently, we have moved our bespoke animations away from using DOM elements to using Canvas, due to memory issues when running on low to medium powered devices such as Chinese Android "sticks" and Google ChromeBit. Everything went smoothly, until we introduced videos. We have found a bug where a video plays on the first load of the page, but then after subsequent refreshes, the video will not play. Instead it just shows the very first frame. What is peculiar is that the video is loaded into its DOM element (used by Canvas to grab the video) and the frame even shows on the Canvas itself, but viewing the network logs in Chrome Inspector, the video is not shown in the logs as being loaded. Image assets are shown, as are the JS files, but no video, despite it being on the page. After some very brief digging, there does seem to be some kind of timing issue in the code. Assets are added to "sub" timelines which in turn are added to a main timeline. It appears that the sub timelines are firing their onStart callback before the code has chance the load the videos into the DOM element (looking at the code with my colleague, the order looks correct) Is there any reason why a (sub) timeline would start prematurely, before the main timeline is told to play?
  13. HI! I want to convert timeline lite elements with their animations into canvas animation, I mean the whole dom element and its children that contains timeline lite animations. an animation like this one http://codepen.io/ihatetomatoes/pen/QboVVV is there way to do that? I've found some libraries that only take a screen shot of the page but no animations.
  14. Hello everyone, I am working on a project where I mix PixiJS and GSAP to animate my canvas' content and I am encountering an issue with the BezierPlugin, more specifically its autoRotate feature. For some reason it goes crazy when I enable it. The bezier path itself is correctly respected but the Sprite (which is a car in my app) rotates a few times on itself instead of slightly turning to indicate it's following the path. The way it rotates makes me believe it might be something related to the center of origin but I can't figure out why or how to fix it (I imagine it might also be more related to PixiJS rather than GSAP). You can have a look at http://haveagoodride.atvea.org/ (I know it's no CodePen, I hope it's not too much of an issue) which is my work in progress for the project. The issue I'm talking about is easily spottable but I'm talking about the vehicle moving along the path after you hit that "Let's go" button. Here's how my Bezier tween is written: path = [{x:-200, y:2000}, {x:286, y:1837}, {x:330, y:1725}, {x:330, y:1725}, {x:376, y:1669}, {x:387, y:1589}, {x:326, y:1531}, {x:242, y:1534}, {x:173, y:1519}, {x:140, y:1465}, {x:131, y:1420}, {x:155, y:1381}]; TweenMax.to(vehicle, 5, {bezier:{values:path, autoRotate:true}}); If needed to be looked into a bigger scope, it's in my app.js file, line 182. What am I missing here? Thanks!
  15. Hi! We have been working on a new way to export faster, smaller HTML5 from Adobe Animate. As we are nearing launch we would love to hear about your experiences with Flash and Animate for HTML5. https://www.surveymonkey.com/r/Z3DNNQB Be sure to enter your email for a chance to download the product before launch!
  16. Hi, We created a small game, where we tween a very long image (18000px) on the canvas. It has good performance on Chrome with a strong pc. But the tween is vey laggy on standard laptop or Firefox / IE. And I think this is relevant snippet: function init() { canvas = document.getElementById("bg").getContext("2d"); img = new Image(); img.xpos = 0; img.ypos = 0; img.src = "img/bg.jpg"; img.onload = function() { animate(); } $('#trigger').click(function() { TweenMax.to(img, 60, {xpos:-17807, ypos:0, force3D:true, ease:Linear.easeNone}); TweenMax.to($('#egg_container'), 60, {x:-17807, force3D:true, ease:Linear.easeNone}); TweenLite.ticker.addEventListener("tick", animate); }); } function animate() { canvas.drawImage(img, img.xpos, img.ypos); } init() We do something wrong? How can be the tween animation smooth on everywhere. We have BusinessGreen plan, please help! Best regards, Ferenc Krix
  17. Hi, Folks. First of all, thank you so much for all these years. You rock! I am trying to make a "slider" that goes through a path made by bezier curves. My first attempt was build the animation and controll it with TimelineMax. So, when I click and drag an area I want to control a div through this curve. So, my first problem: I do not know how to take the path that BezierPlugin made internally and draw it on canvas. I know there is the method BezierPlugin.bezierThrough. It returns an Object with two Arrays, x and y. But inside these Arrays the objects have the properties a, b, ba, c, ca, d, da and I do not know how to use them to draw the path into canvas (I always used the quadraticCurveTo method and it accepts 4 parameters. Probably this is just a simple matter of understanding how those properties work together to define the right curve points of the path. The last problem Of course, make a simple drag/drop in a linear percentage will not sync the DIV animated with my mouse position. Here is where I am a bit lost: how can I sync the position of the DIV with my mouse coordinate? Like a "curved horizontaly scroll". Thank you for your help.
  18. I've been trying to animate an image that I set up in canvas with Easel JS, and have no success. I was curious if anyone had advice on how to do this? Also, I am under the impression that animating in canvas will give me a significant performance increase, as opposed to inside the DOM. I was curious if there was a good resource I could be pointed to, to help me better understand GSAP + canvas.
  19. A few days earlier I know, but I am off to the beach tomorrow. I wanted to say a big THANK YOU to the awesome GreenSock team. Thank you for all the new features, plugins and the incredible amount of work put into the GSAP tools that make our lives so much easier. Also a big thanks to everyone contributing to this forum for helping newbies and pros getting to know GSAP, brainstorming ideas and for simply being so helpful every time. https://ihatetomatoes.net/happy-new-year/ Happy new year. Petr
  20. I'm not 100% sure this is the correct place to post this. I have a question about Flash Pro CC 2015 when using the canvas file type. When I create a movieclip and set the registration point to the top left corner and place it on the stage. When I change the properties in the Properties panel and set the x and y values to 0 it moves to the top left corner like it should. But when I set these values using javascript this.mc.x = 0 and this.mc.y = 0; It uses the center point of the movie clip. So the top and left half of my mc are off of the stage. I'm not sure why this is. Does it have something to do with how the DOM reads the js file? I would like to have it when I write that code that it does the same thing as it does on the stage when i use the properties panel Thanks!
  21. I'm trying to change the fill color of a movieclip I created using Flash Pro with the canvas tag / Create JS. This is what I'm trying: TweenLite.to(instructions.demoColor, 1, {colorProps:{backgroundColor:"#279133", tintAmount:1}}); TweenLite.to(instructions.demoColor, 1, {colorProps:{backgroundColor:"#279133", tintAmount:1}}); But nothing seems to be working. I saw an older post in the from (2012) that was using : TweenLite.to(circle, 3, {y:150, easel:{tint:"#0000FF", tintAmount:0.5}}); That also doesn't seem to do anything. I don't see any errors so I'm guessing this line is just being ignored. Thanks!
  22. violacase

    Canvas or SVG?

    Hi folks, Not a specific GSAP related question I guess, but perhaps still a bit... In this forum a lot of focus is put on SVG manipulation and just a little bit on canvas. I would like to know what display 'system' javascript experts would choose in the year 2016 and why if they would start a blank web page project with lots of GSAP. SVG or Canvas?
  23. Hi All, I am trying to animate a mask in a Flash HTML5 Canvas document using TweenLite. I am trying to animate a symbol that is in a mask layer. But when I try I get a JavaScript console error: TweenLite.min.js:12 Uncaught Cannot tween a null target. My other objects animate fine. I believe I have all the proper .js files loaded in the HTML (easelJS, tweenJS, movieclip, preloadJS) and the Tweenlite files (CSSPlugin, EasePack, Tweenlite). Here is the code I used that throws the error. TweenLite.to(this.leftYellowStripeMask, .5, {y:-9, ease:Quad.easeOut, delay:.3}); I'm guessing masks are not supported this way? Thanks,
  24. Hello! I'm creating a banner using Flash CC HTML5 canvas. What I do is adding animation code to each frame. After it completes I want the next frame to be played. I included two libs into the HTML file: EasePack.min.js TweenLite.min.js So at the current frame I am writing the following code (source file: test7.zip ): this.stop(); TweenLite.to(this.target, 1.35, {delay: 0.1, y: 180, ease:Elastic.easeInOut, onComplete: pplay } ); function pplay(){ this.play(); window.alert('123'); }; The frame is animated but it stops at the end instead of going to next frame. At this time the alert works, but I can not skip it - it's like a loop function. How can I get to the next frame? P.S. Previously I worked with greensock AS2 at Flash CS 6 - everything worked perfect. Best regards, Vital
  25. Quick question. I was wondering if is possible to create an highlight effect in top of 2 draw canvas images. I'm creating a beaker with a back and front image. I would like create a highlight effect. Any codePen or tutorial about it? or this is not possible with GSAP?
×
×
  • Create New...