Jump to content
GreenSock

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

Carl last won the day on April 4 2019

Carl had the most liked content!

Carl

Moderators
  • Content Count

    9,242
  • Joined

  • Last visited

  • Days Won

    532

Carl last won the day on April 4 2019

Carl had the most liked content!

Community Reputation

9,379 Superhero

About Carl

  • Rank
    Moderator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I'm not 100% sure the order of things in React, but the short story is you probably need a css rule to hide the element (visibility:hidden) when its first rendered. More info here:
  2. If you are using ActionScript 3 then you can export to swf and video, maybe gif (its been awhile). The video export with AS3 is excellent with no dropped-frames. Each frame renders perfectly before being recorded. If you are using HTML5 canvas and JavaScript, no the scripted animations can not be exported to video. you will have to run your output file in a web-browser and use a screen recording program. If you need help doing common tasks in Animate with JavaScript check out my "not a course" collection of starter files: https://www.creativecodingclub.com/courses/adobe-animate-for-html5
  3. Hi @harry_vanarse GreenSock is the perfect library for creating animated banners. It does require that you know a little bit of JavaScript and you spend a little time learning the syntax. You can't just build a good banner in 15 minutes without investing some time into learning the basics. I would recommend first GreenSock's getting started page: I have GSAP 3 courses for beginners, but before you buy anything watch the free videos for my GSAP 3 Express Playlist There are links for my courses below in my signature, but I wouldn't want you buying them if the JavaScript or basic concepts are going to be a problem.
  4. In case anyone tries the link to my courses. I woke up to an SSL security issue with Thinkific (who hosts my courses). They are looking into fixing it. You can use this secure link to browse the courses. Sorry for the trouble. Should be fixed soon. thanks for the promo, Zach.
  5. awesome. spareASquare("NO!") 🤣 Where did you get the spritesheet from?
  6. Are you using Animate to export a static SVG or are you exporting to HTML5 canvas? If you are creating an SVG that you then manually add to your HTML page then I can't really add anything to Zach's advice. If you are doing an HTML5 canvas export I really don't think you have access to any SVG path data. I'm 99% sure MorphSVG will not work with Animate's HTML5 canvas output.
  7. Hi, Adobe Animate outputs to canvas. transformOrigin is for a css property for DOM elements. When using Adobe Animate it's important to understand that you can only animate numeric properties of EaselJS Display Objects: https://www.createjs.com/docs/easeljs/classes/DisplayObject.html or values supported by GreenSock's Easel Plugin. In that list you will see regX and regY properties that you can set which is similar to transformOrigin. The regX and regY values are pretty much where the pivot point would be on your Movie Clip. One annoying thing is that if you change the regX or regY it also changes the position of the object. In the demo below I have to offset the position after changing the regX and regY The code below shows how I changed the pivot (or transformation) point. gsap.to(this.default_mc, {duration:3, scale:2, repeat:10, yoyo:true}); this.top_left_mc.regX = 0 this.top_left_mc.regY = 0; this.top_left_mc.x -= 25 this.top_left_mc.y -= 25; gsap.to(this.top_left_mc, {duration:3, scale:2, repeat:10, yoyo:true}); I've attached the fla to this post, but it is also available in my Adobe Animate for HTML5 "not a course" which is a bunch of source files I created to help people struggling with Animate (as I have). change-transformation-point.fla.zip
  8. looks like i'm 30 seconds slower than @OSUblake today but i'd like an extra point for the timeline example. 🤣
  9. Yup. GSAP animations have a default ease of "power1" https://greensock.com/docs/v3/Eases You can change easing on a per-tween basis like gsap.fromTo("something", {x:10}, {y:200, ease:"none"}) or globally https://greensock.com/docs/v3/GSAP/gsap.defaults() gsap.defaults({ease:"none"}); or on a timeline gsap.timeline({defaults:{ease:"none"}));
  10. If the end goal is to have the function called very shortly after the addPause and you don't want a dummy tween adding space (time), perhaps just use the position parameter on your call like so tl_Timeline .add("label1") .addPause("label1") // call function 0.001 seconds later .call(function() { doStuffWhenTimelineContinues() }, [], "+=0.001"); the 3 params for call are: callback function, params array, position: https://greensock.com/docs/v3/GSAP/Timeline/call() also, to clean things up you can define you function outside of the timeline and call it like so: .call(doStuffWhenTimelineContinues, [], "+=0.001");
  11. hmm, this doesn't appear to be valid GSAP code for add() t1.add(".logo-button", {ease: "power2.out", duration: time1, opacity: 0.0}) t1.add(".logo", {ease: "power2.out", duration: time1, delay:0.4, opacity: 1.0}) t1.add(".husky-mono", {ease: "power2.out", duration: time1, opacity: 1.0}) I think you want to do t1.to(".logo-button", {ease: "power2.out", duration: time1, opacity: 0.0}) t1.to(".logo", {ease: "power2.out", duration: time1, delay:0.4, opacity: 1.0}) t1.to(".husky-mono", {ease: "power2.out", duration: time1, opacity: 1.0})
  12. Hello. For more advanced senarios there Is a helper function to get a nested label’s time relative to a parent timeline https://greensock.com/docs/v3/HelperFunctions
  13. Yeah, shrug, I can't remember the last time gotoAndPlay() was referenced anywhere on this site. It was deprecated ages ago. I'm guessing very close to when the JS flavor first came out when parity with AS3 had some value. And yes, gotoAndPlay() is still part of the CreateJS API to control and Animate timeline.
  14. Carl

    Random animations

    Cool demo. The first part of your question can be solved by adding repeatRefresh:true to your timeline like so: var tl = gsap.timeline({ repeat:-1, repeatRefresh:true }); This is explained in more detail in the GSAP 3.1 release notes. Be sure to watch the video!
  15. With the position parameter use tl.to("p", {color: "#800", fontSize: "12pt", duration: 1}, “+=2”) whick will start the animation 2 seconds after the previous tween.
×