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. Let me start by saying that I know this is a Chrome/Chromium issue. The CodePen works as expected in Firefox. Also, I know Blake has warned about using foreignObjects but I'm stuck with using them because, in my app, I have to use foreignObjects to render image layers to canvas creating a stack of PNG sequences inside a master SVG. I'm also forced to be able to support Chrome/Chromium. Here's the deal. I've run into a stacking context issue which I thought I had resolved before by doing something subtle to the SVG container using TweenMax to force the browser to do a redraw. Here, though, the issue is a little different. I have to allow my users to shift the order of each foreignObject which I accomplish using a javascript insertBefore. But, as you can see in the CodePen, if you shift the animated element to the back of the stack and then re-run the animation the browser is rendering it on TOP of the stack for as long as the animation is running. Then, once the animation is completed, the browser renders the element to the back of the stack where it belongs. Forcing a redraw like I've done in the past is not working. Any help would be greatly appreciated.
  2. Hello How can I draw a line with animation on canvas? I want to draw animating line on my canvas chart can I draw a line using as lineTo canvas method and make animate it with GSAP?
  3. Hey GSAP friends! I'm tweening a SVG circle's radius value and need it to sorta vibrate as it expands and contrasts. I'm just wondering, from a performance standpoint, what should give me best performance: var tl = new TimelineMax({repeat: -1, ease:Power0.easeNone}) //A: tl .to(svg, 2, {attr:{r:150}, ease: CustomEase.create("custom", "M0,0,C0,0,0.051,0.218,0.06,0.256,0.073,0.245,0.138,0.197,0.155,0.185,0.166,0.209,0.213,0.311,0.22,0.324,0.222,0.316,0.291,0.284,0.294,0.276,0.299,0.29,0.362,0.23,0.386,0.284,0.466,0.375,0.446,0.529,0.474,0.56,0.479,0.538,0.574,0.486,0.58,0.462,0.622,0.505,0.803,0.689,0.905,0.792,0.911,0.871,0.923,1.026,0.925,1.045,0.929,1.038,0.973,0.959,0.98,0.948,0.982,0.954,1,1,1,1")}) .to(svg, 2, {attr:{r:100}, ease: CustomEase.create("custom", "M0,0,C0,0,0.051,0.218,0.06,0.256,0.073,0.245,0.138,0.197,0.155,0.185,0.166,0.209,0.213,0.311,0.22,0.324,0.222,0.316,0.291,0.284,0.294,0.276,0.299,0.29,0.362,0.23,0.386,0.284,0.466,0.375,0.446,0.529,0.474,0.56,0.479,0.538,0.574,0.486,0.58,0.462,0.622,0.505,0.803,0.689,0.905,0.792,0.911,0.871,0.923,1.026,0.925,1.045,0.929,1.038,0.973,0.959,0.98,0.948,0.982,0.954,1,1,1,1")}) //B: tl .to(svg, 4, {bezier:{curviness:1.25, values:[{ {attr:{r:90}}, {attr:{r:40}},{attr:{r:50}},{attr:{r:80}},{attr:{r:150}},/*...etc...*/{attr:{r:95}},{attr:{r:100}} ]}} }) //or C: tl .to(svg, .1, {attr:{r:90}}) .to(svg, .1, {attr:{r:40}}) /*...etc...*/ .to(svg, .1, {attr:{r:150}}) /*...etc...*/ .to(svg, .1, {attr:{r:100}}) I know the level of control/readability will be different with each, but just wondering from a performance standpoint what will be best, or if it'd be minimal? Also, how would one go about testing this? There will be more going on in the timeline (several circles being animated in a similar way).
  4. Hey guys, In a previous post, I asked about adding text to a banner that would be picked up by a screen reader, and got a great answer. The ad unit was given a once-over by some folks at the ADA, and they came back to us saying that we should have tabindex controls on any buttons in the banner as well. We have a play/pause, replay and the cta button that would need that attribute. My problem is, I built this particular unit in Animate CC, and don't know how to add tabindex to those elements. I saw that the 2dContext of the canvas element has a drawFocusIfNeeded() method, but how do I add that to my buttons? Also, can anyone confirm that the content of the banner, if it's being iframed in, will receive focus if the user keeps tabbing? Again, for the record, this is the first banner I've ever built that had all these strict ADA requirements, so I'm a little new at this. Thanks!
  5. I am trying to add the gradient effect of the small arc in my canvas image. Using context.createLinearGradient(0, 0, 400. 400); secondGradient.addColorStop(0, 'white'); secondGradient.addColorStop(0.2, 'black'); secondGradient.addColorStop(0.8, 'black'); secondGradient.addColorStop(1, 'white'); But unable to get the expected results, also would be great if someone can explain how createLinearGradient works with circle. the idea is to have the edge effect of the arc's end. If I had to guess, I think I am doing something wrong with the context.createLinearGradient(0, 0, 400. 400); part. Thanks in advance.
  6. jimeast

    GSAP and Canvas

    I've written in Gsap and for The Canvas element. Is there any room for GSAP in Canvas or visa versa. Are there any examples of the 2 working together? I suppose I could use multiple Canvas elements sort of like Flash MovieClips. I'm rambling I just want to know if there's any practical overlapping of the 2.
  7. Lets have a look at this awesome 4 column animation. Website: orangina.eu Any idea how to make the 4 column hover animation using gsap?
  8. Hi all, happy to join this forum with my first post! I've been using GSAP for quite some time now (Loving it!), and I also started to integrate his capability along with other cool drawing libraries. In this case, I'm having some hard time figuring out why frame-rate and animation performances decrease drastically on Safari and Firefox (Chrome is buttery smooth) when animating the following SVG shape using a combination of GSAP and two.js (Canvas Rendering). I've tried to change the rendering intent from canvas to SVG (via the two.js API) and animate a standalone SVG with GSAP only. In all scenarios, I'm experiencing the aforementioned issues. Does anyone have some good suggestion? Many thanks in advance!
  9. There are 4 same sized pictures that's I have cut in 4 equal parts, the problem is I can't make them animate on hover. The part I have hovereda should become wider. I tried to make it this way - but this example doesn't work with reactive variables in Vue, I'd declared in object with coordinates.
  10. Hello, I'm using TweenMax to try to do a rotationX on a Bitmap that I have added to the stage using EaselJS. Does anyone know if it is possible? I have looked at this post but it has been over a year and I didn't know if something might have changed. http://community.createjs.com/discussions/easeljs/462-integration-with-greensock-tweenmax-tweenlite Here is the code: _rodHolderCover = new createjs.Bitmap("images/rodCover1.png"); stage.addChild(_rodHolderCover); _rodHolderCover.addEventListener('mousedown', handleKeyDown); then in the event handler I have this. TweenMax.to(_rodHolderCover, 1,{rotationX: 180}); rotation works great and so does x and y,
  11. http://robinmastromarino.com/ Hi I want to make a slider in this way. Could you help me with a similar project
  12. Hi everybody! I am completely new to GSAP. First of all I´d like to notice that I really have a hard time to get into this stuff. The documentation isn't that good for a beginner. I neither don't know what kind of plugins or other 3rd party java stuff is needed to use the gsap plugins, nor I really do not get it how to call up funtion to do something with gsap. So, how did I get here? I already programmed a little website for a geocache listing, but on mobile devices the site is kind of slow. Somebody told me to "do the trick" with gsap because it is much faster than jquery. My goal is to change the colors of pictures, borders and text when a checkbox is clicked. Here you can see what I mean: My example website I removed the images (actual code not in the example page) and now want to draw one corner image in 4 canvas. Here is what I got so far. <script> window.onload = function() { var canvas = document.getElementsByClassName("edge_can"); // I gave the canvas a class named "edge_can" / not on the example page! var ctx = canvas.getContext("2d"); var img = new Image(); img.src = "https://www.tissi-solutions.de/caches/matrix/edge.jpg"; ctx.drawImage(img,0,0,100,100); }; </script> Do the canvas need all one "id" or can I use a class to draw 1 picture in multiple canvas? How do I do that? Do I really need canvas for this or can I manipulate the colors by just calling a gsap funtion? Which plugins are needed to change all mentioned colors? Do I need PixiJS for the Pixi plugin? Am I on a right approach or do you think that the speed won´t improve by changing to gsap? Any suggestions are welcomed! Thanks in advance! Tissi
  13. I am trying to reveal the black background only after the two red and blue canvases have completed the animation. But as you can see there is "leak" and the black ground is visible during the rotation. Also I'm learning to control overflow and have found this link https://stackoverflow.com/questions/8837050/allow-specific-tag-to-override-overflowhidden , but theres something I'm doing wrong . Please Help.
  14. Hi, I'm new to GSAP and I'm trying to find a way to create an interactive map using a JPG image as the basemap and canvas and GSAP for the animation. I came across several examples on the GSAP website and a live project online that looks exactly like what I'm intending: http://rainforest.arkivert.no/#kart Can you tell me how is this done, or if there are any documentation/tutorial/workshop materials that I can go through. Please advice. Thanks in advance, Hagop
  15. Hi guys, I want to know if its possible to achieve animation like this with morphSVG? (see the link below) https://giphy.com/gifs/3o6fJ1O72KpIh4YRLa. Im trying to wrap my head around how to achieve this and I liked to know how you guys would approach an effect like this.
  16. Hi all, I'm trying to recreate the effect I created below, but in canvas for performance reasons. Problem is My function loops over all the colors and instead of creating all independent shapes on the canvas with their own timing, it overwrites the arc on the canvas. I relatively new to canvas so, sorry if it's obvious. Thanks for the help!
  17. Hi everyone, I recently made an animation which recently had quite good feedback from the codepen community (https://codepen.io/alaricweb/pen/vWxPyp ). I too feel like there is something very cool in this animation but the perf are really bad on mobile. I don't blame GSAP for that it's pretty amazing already to be able to have such result with that few lines ! But now i want to be able to use this kind of animation in a real website but with that impact on perf it's not imaginable. I don't think i can improve the perf significantly with SVG only, if i animate less stroke, the result won't be as cool. So i'm currently looking to an alternative to have the same animation but with improved perfs ! After some research i'm starting to think that animating inside a canvas is my best option. I feel like PixiJS could be a good option with some tricks, maybe threeJS too. I saw @OSUblake pen in which we can see that he is using GSAP morphing inside the canvas and the perf are just incredible compared to mine. You can see for yourself here. So if any of you know if it's possible to have my animation inside a canvas and with what method i could try to make it better i'd be thankful for some guidelines. Alaric
  18. Note: when you open the Codepen scroll down to the bottom Hello there! I'm a JS/HTML5 newbie trying to animate an IRC chat using HTML5/JS in Animate CC. My goal is to dynamically create rounded rectangles with text from the chat and load them onto the canvas from the bottom. New messages would pop up from the bottom of the list and push the other messages upwards. Currently, I have the WebSocket set up and listening to messages. When it detects a message it sends it to the queue where it checks if any animation is currently playing, then if not it generates a rounded rectangle and the message text and animates it coming up from the bottom of the screen. My problem now is, if I send another message, another instance of this rounded rectangle is created and animates on top of the old one. I tried instead pushing each object pair (the text and the rectangle) into an array and then accessing it from there, which works, however, I'm having a little trouble optimising it (I attached a codepen to demonstrate the effect I'm going for and the bloated spaghetti code) (and I don't know if this is the best way to do things). The messages would also need to fade out to the side after a certain amount of time, which would mean new messages need to start lower down again. So, I'm thinking maybe each message has some kind of timer that animates it being removed and removes it from the array so that newer messages can overwrite them? I'm not sure. Does anyone have any suggestions for how I could approach this? Any help would be greatly appreciated, thank you! EDIT: This was my attempt at iterating: (the main attached one is what I'm trying to achieve without manually specifying the Y position, as the height of boxes will be dependent on the size of the message).
  19. Hello, first-time poster here! I'm an HTML5/Animate CC newbie (and not really a dev in general, just doing this for fun and learning) and I was wondering if someone could tell me what I'm doing wrong here. I would like to be able to use GSAP to animate a vector file I'd add to the stage and would need to be able to make it animate when I call a function, however when I try to do this I keep getting cannot tween a null object, but if it's not wrapped in a function the animation plays fine. I created a new HTML5 canvas to see if I had the same problem, and I did: 1. Added a symbol to a blank HTML5 canvas, made it a MovieClip and drew a circle. I called the instance mcThing 2. In the Timeline, I selected the first frame and went into Actions 3. I wrote: function playAnimation() { TweenMax.to(this.mcThing, 3, {y:500}); } playAnimation(); 4. When testing in Chrome, I get cannot tween a null object. If I reference it as mcThing (omitting the this. I instead get mcThing is not defined. 5. If I then remove the function and just have this: TweenMax.to(this.mcThing, 3, {y:500}); It plays fine, but now I can't call it when I need to. Some context: Essentially what I currently have is a WebSocket listening for messages. When it receives a message, it's added to the queue. I am trying to get it to play an animation and insert the text from that message. The text itself should be okay: I used CreateJS to instantiate a text in the code and TweenMax works there, the problem is animating shapes/drawings. I suppose I could instantiate all the shapes in the code itself and TweenMax would work then but I don't think this is realistic as the animation/shapes are fairly complex, so I'm trying to target the stage. The animation would play out, stop, then the message would be removed from the queue and the next one would play (same animation, different text). I think this is a scope issue, but I'm not sure what I need to change. I have used GSAP in AS3 recently and it was working completely fine within functions. Any help would be much appreciated!
  20. I am trying to improve my CSS animation skills by recreating concepts I find on dribble but this one is giving me a hard time: https://cdn.dribbble.com/users/73241/screenshots/3543071/attachments/787158/att_split_00.gif I am unable to figure out how to recreate the sound visualizer's effect. I am able to setup a normal sound visualizer with bars for the frequencies but I am unsure how to approach the special effect or know if it's even possible. I have been using "shooting fountain" as a reference for it's animation but surely I have it's terminology/description wrong. Currently I am using canvas to setup a mock for it but the effects are far too complex for my experience so I am trying to find alternative methods to replicate the effect. I am looking at potentially using the GSAP's physics plugin to simulate the gravity and draw the particles themselves but I am unable to find any references to study from. I appreciate any suggestions or references that can better help me achieve similar results. Thank you for your time.
  21. Hello there, I've recently been exploring ways to create awesome animations and i've come across the 'canvas' element. Now i've been looking at some articles which explain which frameworks or libraries exist out there to assist in creating animations on canvas. But it's 2017 now - Almost 2018, what is the best framework I can use for the broader use of Canvas? I'd like to create some cool parallax backgrounds, or multilayer which move on scroll, for now anyway. As always, any help greatly appreciated
  22. I'm currently using GSAP TimelineMax, TweenMax etc.. in Adobe Animate cc 2017.5 (canvas) and its work well but, I need to apply GSAP TextPlugin to my Animate cc (canvas) project. I'm try to do this adding dynamic text field but its not working and following error appear in console " TypeError: b.nodeName is undefined ". Thanks.
  23. Hello. function moveCard(card, userIndex, winner, image) { if(!card) return; _injectCircularServices(); var game = BCStage.getGame(); _clearCardColorTimeouts(card.id); _disableMyCards(true); self.childCount = self.childCount % 4 + 1; if(self.childCount == 4) { self.bitaIndex++; } self.bita[self.bitaIndex] = self.bita[self.bitaIndex] || game.add.group(); var bita = self.bita[self.bitaIndex]; bita.add(card); _dealPositions(userIndex, self.usersCards[userIndex].children.length, card.id, false); self.usersCards[userIndex].remove(card); _bitaWatcher(bita, BCUsers.transformSit(winner)); if(image) { card.loadTexture(image); } BCSound.card_drop.get(); var isTabInactive = document.hidden ? 1 : null; var positionX = BCConfig.dealPositions[userIndex].positionX; var positionY = BCConfig.dealPositions[userIndex].positionY; var cardAngle = (card.angle < 0? -1: 1) * BCConfig.dealPositions[userIndex].angleInTable; card.width = 106; card.height = 143; card.angle = cardAngle; if(isTabInactive) { card.scale.setTo(0.9, 0.9); card.x = positionX; card.y = positionY; if(self.childCount == 3 || winner) { _removeBita(); } return true; } else { var cardScaleTween = new TweenMax.to(card.scale, 0.45, {scale: 1, ease: Power3.easeOut}); var cardPositionTween = new TweenMax.to(card.position, 0.8, { x: positionX, y: positionY, ease: Power4.easeOut}); var cardTweenLine = new TimelineMax({paused: true}); cardTweenLine.add(cardScaleTween, 0); cardTweenLine.add(cardPositionTween, 0); if(bita.children.length > 1) { bita.forEachAlive(function(_card) { cardTweenLine.add(TweenMax.to(_card.position, 0.4, { x: _card.x + makeMinusOrPlus(randomBetween(1, 6)), y: _card.y + makeMinusOrPlus(randomBetween(1, 6)), ease: Power0.easeNone}), 0.465); }, game); cardTweenLine.add(TweenMax.to(card.position, 0.4, { x: positionX + makeMinusOrPlus(randomBetween(1, 6)), y: positionY + makeMinusOrPlus(randomBetween(1, 6)), ease: Power0.easeNone}), 0.465); } bita.add(card); cardTweenLine.play(); } if(self.childCount == 3 || winner) { setTimeout(_removeBita, 950); } } This code is tween a card. but if you fast clicking on the card (the object that start tween) sometimes animation "breaks" This function called only one time (called on socket response which is once a time)
  24. I use Adobe Animate to put my canvases together, not sure if that makes a difference to what I am asking: I have the following code on my main timeline, and it works fine there, with buttons that are also on the main timeline. function buttonOver(theBtn) { thisBtn = theBtn; TweenMax.to(thisBtn, 0.1, { ease: Sine.easeOut, scaleX: 1.05, scaleY: 1.05 }); } However I am having difficulty doing the same thing within a child mc. I have a child clip that contains four buttons that I want to all use this function, and I hope to be able to keep this code within the child clip too, so that it becomes a self contained unit which I can reuse in different projects. I have tried several variations and none have worked. It doesn't necessarily throw an error, just no animation occurs. If I put a console.log in the function it sees and responds to that, it's just ignoring the tweens. I am not sure if it is because the child clip does not know what TweenMax is, or if I am targeting the buttons incorrectly, or something else entirely!
  25. Hi, Does anyone know of a working example or a pen using the GSAP SVGdraw plugin inside of Pixi.js canvas setup ? The goal is to draw ( animate ) svg paths of an svg redrawn inside of Canvas. ( svg inside the canvas is setup as Pixi graphics object. ) Thanks.
×
×
  • Create New...