Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'canvas'.



More search options

  • 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

Found 89 results

  1. Hey guys So i am making a project with gsap3 kind of like the apple airpod website I have like 500 + images and on scroll these images are being rendered in the canvas. I want to animate some text which will depend on the frame count the sequence is - frame ==0 animate in some text frame>0 animate out the previous text frame>10 again animate in some text frame>200 animate out the previous text so it goes... can some one tell me how can i do this in a efficient way. Thanks
  2. I am looking for examples of controlling a canvas animation with ScrollTrigger. The documentation suggests this is possible, but not sure where to start. I am creating banner ads with Adobe Animate and would like to use ScrollTrigger for presentation effects on my website. I have a video looping on my home page and would like to use ScrollTrigger to control the video. The video is currently streaming from Vimeo but I can make it in Animate as a canvas animation similar to the banners. I use GSAP from inside Adobe Animate for the superior easing effects and more precise controls. https://roguemotion.graphics
  3. I was wondering how does this kind of white wave from this site possibly made by GSAP? Is there any additional plugin necessary? I took so many times investigating this site. Hope I find the answer here. Thanks https://krotravelengineering.jp/
  4. Hello again guys ✌️ I´m right into the ‘basic‘ ScrollTrigger thing for quite a while now. Since I´ve upgraded myself with ShockinglyGreen, so things getting even greater with the MorphSVGPlugin, which progress of transformation can be controlled with ScrollTrigger. The Results are impressive. After playing around with this while interacting with svg elements directly in the DOM, I slightly get disturbed by the fps drops this can cause with other animations or if you get your page in bigger screen dimensions or resolutions (4K / Retina). I stumbled upon a great library called paper.js which can bring path information into canvas, which (in theory) should appear as the more performant approach, especially if you scale things up. Also the feature to group and edit things in paperscipt could be a good partner by creating for example a sweet set of dynamic fullscreen transitions without touching the DOM. The example below shows that it´s contents created with paper.js / paperscript can be changed by gsap and ScrollTrigger in a simple manner: demo It would be great to have a smart way to archive the MorphSVGPlugin behaviour inside this canvas stage which is controlled by ScrollTriggers progress. Maybe there is another general solution or it isn´t even really faster from an performance perspective than I expected. I´ll fork a simple demo to see morphSVG in action Seen on: Would love to read some thoughts from you about that Best Wishes, Richard
  5. Dear forum participants. I need your professionalism in coding. I can’t understand what is used to achieve effects such as in these examples: 1. When you click on any project from the bottom up, the rounded form of the divlock block https://jesperlandberg.dev/ 2. a very similar effect we can see when you click on the menu at https://www.chiaraluzzana.com/about 3. when you hover over any project + when you click on this project, a similar effect appears https://www.martinehrlich.com/ I hope I threw off enough examples to understand what I mean. I want to achieve a smooth distortion of the standard div block. With CSS, this smooth effect is not possible. Please tell me the script or explain how to repeat it? I also found a library with a similar menu, but I don’t quite understand whether it is or not: https://tympanus.net/Development/OffCanvasMenuEffects/bubble.html
  6. Hi, guys! I'm wondering if there is a way to move an element without the need to hover the cursor on the draggable element? Thank you!
  7. Just curious if Draggable now works with EaselJS and Canvas? I found a post from almost 7 years ago where the answer was no, but that was 7 years ago and now I know that GSAP 3 is compatible with EaselJS I even use it inside of Adobe Animate which I do a lot of programming in. But my issues is If draggable is compatible now I am not sure how I can target my movieclips. Draggable.create(Main.MorningTasks.getChildByName(Root.ScheduledTasks.Morning[i].text), { type:'x,y', bounds: Main, onClick: function() { console.log(Task.name); }, onDragEnd: function() { console.log('Released ' + Task.name) } }); Following the example on Draggable Plugin Page, what I have I think should be right. Just looking for some guidance, I love GSAP and would love to be able to use draggable as well.
  8. Hi guys, I love using AnimateCC in conjunction with Greensock but the only thing that has always been sort of a headache has been how to animate alpha gradient masks. After some trial and errors creating and animating the mask, here is the file I wanted to share with the community, hopefully it will benefit somebody. One important piece of information that the Adobe Support team shared as well was:"Please avoid adding scripts within the mask and maskee symbols or multiple level of nesting within them because they need to be cached as bitmap for masking to work." AlphaGradientMask_radial.fla.zip
  9. I am trying to develop an infinite canvas animation which show cases a number of clickable images on it. On moving the cursor the images will move in the opposite direction, I tried this with div now, is it possible to use Canvas for an infinite scroll effect. Plugins used: TweenMax, TweenLinte, ScrollToPlugin, Draggable
  10. Hey guys, I have a pretty interesting challenge. I need to animate the "playhead" of a <video> element. Ie the video.currentTime property. Running currentTime through TweenMax like so doesn't work as setting currentTime takes a little while to update, so it simply jumps to it's destination. I suspect what I want to do can't be done using the native <video> element, but I have to use an image sequence and <canvas> instead, but I wanted to check with you bright fellas before venturing down that path
  11. GreenSock

    EaselPlugin

    Tweens special EaselJS-related properties for things like saturation, contrast, tint, colorize, brightness, exposure, and hue which leverage EaselJS's ColorFilter and ColorMatrixFilter (see http://www.createjs.com/#!/EaselJS for more information about EaselJS). Of course you don't need the plugin to tween normal numeric properties of EaselJS objects (like x and y), but some filters or effects require special manipulation which is what EaselPlugin is for. Currently it only handles special properties related to ColorFilter and ColorMatrixFilter, and it can tween the "frame" property of a MovieClip. GreenSock's EaselPlugin exposes convenient properties that aren't a part of EaselJS's API like "tint", "tintAmount", "exposure", and "brightness" for ColorFilter, as well as "saturation", "hue", "contrast", "colorize", and "colorizeAmount" for ColorMatrixFilter. Learn more in the EaselPlugin documentation.
  12. Hey all, after adding SVG support for elCanvas I wanted to also add the ability to draw an svg outline In the code pen I attached( which i used the public examples version of drawsvg on) I am attempting this 1) Draw a svg on the document with the same paths as the one in the canvas 2) Animate the svg outlines with drawSVG 3) On update match strokeDasharray to setLineDash and lineDashOffset so the canvas shape gets updated As you see it works! However every time I would need to draw an svg into the canvas I would first need to put one on the document, I wanted to ask is there a way around this? Is there a way to get the lineDash/DashArray data without having to draw an svg visually? When I put some animations with this effect into our game the devs might get upset I'm drawing all these elements just for reference I guess this is mainly a question to you awesome devs that made the lib in the first place @GreenSock but also to anyone else who might know. I had another consideration where I could make modifications to the plugin itself, but I really didn't wanna touch that, trying to do this without needing to modify Gsap code Thanks in advance!
  13. Hi Everyone, The CodePen associated with this was forked from @OSUblake. I was successful in adding viewport responsiveness and circular button expansion but am failing in reversing to a circular button collapse. I believe I set the circular canvas diameter and arc correctly but when clicking the close icon on the menu button there is no canvas animation. I would appreciate some assistance and sincerely thank you in advance.
  14. 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.
  15. 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?
  16. 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).
  17. 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!
  18. 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.
  19. 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.
  20. 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?
  21. 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!
  22. 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.
  23. 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,
  24. http://robinmastromarino.com/ Hi I want to make a slider in this way. Could you help me with a similar project
×