Search the Community

Showing results for tags 'beginner'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 11 results

  1. Tissi_2

    Drawing one image in multiple canvas

    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 = ""; 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
  2. This is literally my first animation with GSOP, I have some understanding of Js and a good grasp on HTML and CSS but I am confounded. I have been trying to get this to work for the better part of an hour to no avail. Thank you for any help. Sorry, to clarify I know that the image isn't loading in the pen, but I'm mostly concerned for the animation. The image loads fine on my computer because that's where it's source is.
  3. Hello friends; First of all my English is bad, so I apologize. I'm new in GSAP world, I am studying a carousel Swipe provided by another member of the forum. following link: My doubt be the next point, when you run the onPressed event in Draggable in the middle of execution of TweenMax, it overwrites the position x performed in transition by (), is there any possibility to disallow the onPressed or the default event while the animation TweenMax is active? Thank you.
  4. Guest

    Noob Needs serious help

    I'm SO lost. I've used TweenMax back in the Flash days and I code mobile sites. But, I can't figure out how to load images with GSAP. Tell me where I'm getting it wrong. I have a bunch of pngs for a banner that I need to animate. I thought I could img src="whateverImg" in a div, give them an id, add some css and animate it by id in main.js w/ TweenMax. Is the only way to import the image in the css as background: url(img/whateverImg.png)no-repeat; ? None of the tuts seem to make this clear for a noob Thanks, Pulling my hair out
  5. alwayzambitious

    the difference btw tweening width vs scale

    Hey everyone, lets say I have a div with text inside. tweening the scaleX squishes the text inside but tweening the width, correctly only animates the div.., 2, {delay: 2.2, width:"0px"}); //vs, 1, {scaleX: .5, delay:.2,transformOrigin:"0% 0%"}); Ques: Is there a way to scale using transform/scale without scaling the text inside the division or is that just how CSS works... on initial search, i didnt see this discussed elsewhere Thanks in advance, alwayz
  6. I would like this svg to 'appear to be drawn in a z-form. meaning top (green) line from left to right, then (red) line from where the green line leaves off and returns diagonally right to left, then finally the bottom (black & grey with shading) lines are drawn again left to right. There are two lines that form the bottom line, they should draw at the same time, each of these four lines need to be drawn separately to allow the path width to change a little across each direction change and the two lines (as well as allowing for shading of one) allows the width of the combined line to give change a little and this (I hope) lends a real sketchy nature to the final result. I understand (I think) that the there should be a tween in which each of the three individual line drawSVG effects occur (Note again that the two lines (id="line3") should draw concurrently). I was able to get the sequence right at one time, but the directions never were correct, and then it broke and would not work at all. So I have at least reconstructed it to a place that at least all the parts are present and I think the concept is pretty clear. Things that I would like to really understand; How to assign either an id or class name (I know there was much said about assigning a 'var' to each element and then using the var as the id in the svg; but there are some examples preferring use classes (not clear to me if there is a clear difference in this or cases where one works and one does not). To be honest I have found pretty much everything to be complicated (this is more a feature of JS rather than GS). By the way, I prefer a single more complicated solution that ALWAYS works than some mix of sometimes works easier methods. Once we get past the naming conventions/preferences then we have the nesting of drawing elements (timelines) or delays, either is great, but I am not totally convinced that a TL is needed for something as lightweight as this example (I do like them). Finally once this all works it is my "hope" to be able to export the shading block from the inline SVG to the CSS file. Sorry for the verbose nature of this post, I hope that this will prove helpful to others with my learning style. Something that would be really helpful is a subset of Forums that cover these just starting out sort of items. I had scanned the forum titles as well as searched for both "beginner drawSVG" and "newbie drawSVG" so I am thinking my question may be novel, but if not sorry I tried.
  7. I have put together a compilation of 11 short videos with quick demos explaining the basics of GSAP API to a complete beginner. If you just staring out with GSAP this might be a good place to start. Go To GreenSock 101 Happy tweening. PS: If you happen to sign up and go through the free course, please let me know what you think about the content. Your feedback is very valuable.
  8. Hello everyone, I've just started learning GSAP and jQuery today with the help of ihatetomatoes and this excellent forum. I'm trying to make a hover-able floor plan map that displays information on the currently-hovered room. So far in my proof-of-concept, I have implemented this using TweenMax's hover and TextPlugin. I just have a question about implementing the rest of the map. Instead of individually making a separate function for each block, is there a more elegant way to implement an array so that when you hover over a shape, it changes hoverText to an assigned message? I also plan to have buttons to switch between floors of the building, but I'm assuming that won't affect how the array should be constructed. Thank you very much for the help, and apologies if there's unnecessary fluff in my codepen.
  9. I just got my feet wet with Tweenlite, and created a simple 300x250 display banner. It has a single image and a few lines of type that tween in and out. I was done and saw my file size was about 27kb. A typical banner that size I can get to about 12-15kb, but without the buttery motion GSAP has... I ran an output report and pasted it below... It looks like the 16,000 AS bytes took up a big chunk of the swf. Since Im just doing basic banners, should I stick to Flash's native tweening instead? I also pasted my Tweenlite code below the report, if there's something Im doing that could be bloating the file. I get the possibilities of GSAP being powerful, but I am not at the level currently to use it as a go between between native/timeline tweens and GSAP code. Any thoughts? 300x250 test.swf Movie Report ------------------------------ Metadata -------- Bytes Value ---------- ----- 939 <rdf:RDF xmlns:rdf=""><rdf:Description rdf:about="" xmlns:xmp=""> <xmp:CreatorTool>Adobe Flash Professional CS6 - build 481</xmp:CreatorTool> <xmp:CreateDate>2014-11-03T09:50:24-05:00</xmp:CreateDate> <xmp:MetadataDate>2014-11-04T15:26:42-05:00</xmp:MetadataDate> <xmp:ModifyDate>2014-11-04T15:26:42-05:00</xmp:ModifyDate> </rdf:Description> <rdf:Description rdf:about="" xmlns:dc=""> <dc:format>application/x-shockwave-flash</dc:format> </rdf:Description> <rdf:Description rdf:about="" xmlns:xmpMM="" xmlns:stRef=""> <xmpMM:InstanceID>xmp.iid:EAB7B9250D2068118083F07BA108F061</xmpMM:InstanceID> <xmpMM:DocumentID>xmp.did:EAB7B9250D2068118083F07BA108F061</xmpMM:DocumentID> <xmpMM:OriginalDocumentID>xmp.did:F77F1174072068118083A353E50FFFFA</xmpMM:OriginalDocumentID> <xmpMM:DerivedFrom rdf:parseType="Resource"> <stRef:instanceID>xmp.iid:F77F1174072068118083F07BA108F061</stRef:instanceID> <stRef:documentID>xmp.did:F87F1174072068118083A353E50FFFFA</stRef:documentID> <stRef:originalDocumentID>xmp.did:F77F1174072068118083A353E50FFFFA</stRef:originalDocumentID> </xmpMM:DerivedFrom> </rdf:Description> </rdf:RDF> Frame # Frame Bytes Total Bytes Scene ------- ----------- ----------- ----- 1 30026 30026 Scene 1 (AS 3.0 Classes Export Frame) Scene Shape Bytes Text Bytes ActionScript Bytes ------- ----------- ---------- ------------------ Scene 1 38 0 16116 Symbol Shape Bytes Text Bytes ActionScript Bytes ------------- ----------- ---------- ------------------ arrow_mc 0 0 0 background_mc 0 0 0 base_mc 28 0 0 button_png_mc 0 0 0 headline_1_mc 0 217 0 headline_2_mc 0 84 0 logo_mc 494 0 0 subhead_mc 0 147 0 Font Name Bytes Characters ---------------- ---------- ---------- TradeGothic-Bold 3541 .?ABCDEGHIJLNOPRSTUWYaceghiklnoprtuvwxy ActionScript Bytes Location ------------------ -------- 16116 Scene 1:Frame 1 Bitmap Compressed Original Compression ---------------- ---------- ---------- ----------- background_a.jpg 5858 300000 Imported JPEG=102 Untitled-1.png 549 10212 Lossless button(1).png 1411 4640 Lossless import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; TweenPlugin.activate([FrameLabelPlugin, ColorTransformPlugin, TintPlugin]); import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.BlurFilterPlugin; TweenPlugin.activate([blurFilterPlugin]); //moves headlines off stage, 1, {x:-250, y:137.2, delay:6, ease:Sine.easeOut, blurFilter:{blurX:10, blurY:10} } );, 1, {x:527, y:137.2, tint:0x996007, delay:6, ease:Sine.easeOut, blurFilter:{blurX:10, blurY:10 } } ); //moves final headline onto stage, .75, {x:203.65, y:63.65, alpha:1, delay:7, ease:Sine.easeOut } );, .75, {x:203.65, y:63.65, alpha:1, tint:0x996007, delay:7, ease:Sine.easeOut } ); //moves white base block and white arrow onto stage, 1, {x:150, y:225, delay:8, ease:Sine.easeOut } );, 1, {x:239, y:183.95, delay:9, ease:Sine.easeOut } ); //fades in final elements TweenLite.from(logo_mc, 2, {x:239, y:208.55, alpha:0, delay:10, ease:Sine.easeOut } ) TweenLite.from(button_mc, 1.4, {alpha:0, delay:9.75, ease:Sine.easeOut } ); TweenLite.from(subhead_mc, 1, {alpha:0, delay:10, ease:Sine.easeOut } );
  10. I'm trying to get a Kinetic sprite to change it's animation after the tween it's attached to stops. As of now the sprite changes when the tween starts. Would this just be a callBack function? I know how to do this with pure Kinetic, however, I'm using the KineticJS plugin for the controls. I have my code included in a text file and the area I'm refering to is highlighted. Anyone have some suggestions? script.txt
  11. a13

    Starting out with GSAP

    Hi I'm looking to start out with GSAP for a project. I am building a parallax scrolling site with animated elements as the user scrolls down the page. My approach is to use a framework for the repsonsive layout, an existing jquery script for the parallax scrolling and GSAP for animating the more complex animations work? Is this a logical approach or should I be looking for a more GSAP focussed approach? My concerns is taking too much on with GSAP as I have time constraints. II would be grateful of your thoughts.