Jump to content
GreenSock

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

Search the Community

Showing results for tags 'newbie'.

  • 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 14 results

  1. Hi guys, a bit new to this gsap thing. I saw a few threads around here talking about how to use gsap for landing animations that also utilise localstorage. I have some code at the moment for this, but it seems as if gsap is breaking on the initial load, cancelling the animation entirely import React, {useRef, useEffect} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import Nav from './nav' import {TweenMax} from 'gsap' ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'); ); export defa
  2. Hi everyone, I'm new to GSAP and having a bit of trouble getting the ScrollTo to work properly. I have gsap and ScrollTo CDN at the bottom of the body. Below is pretty much all I have in my JS file. I'm guessing I missed something in the docs just because it seemed so simple to implement GSAP.
  3. hello! i'm new to GSAP, and honestly i have limited JS knowledge. i coded an SVG animation that works perfectly on most browsers, but we need it to work on MS Edge as well, so i'm trying to achieve it using GSAP: i manage to get the first iteration right, but then it goes out of sync. SMIL: https://codepen.io/urx/pen/XWJNgLB GSAP: https://codepen.io/urx/pen/QWwGMbq help?
  4. Noob question... I want to make an animation of array elements 'merging' (like in mergesort). My plan was to have 2 containers: Array1 - initially 5 child divs (created in javascript) that are the elements Array2 - intially 5 child divs (created in javascript) that are the elements (different color) Array 3 -initially empty - (will end up being the 'merged' array) Now, I want my elements to 'fly' out of array1 and array2 and into my initially empty 3rd array. I want them to just end up wherever they would be if I just put th
  5. Hi All, I'm new to Greenstock and to Javascript. I've been doing some corss-dissolving and swapping/zooming of bitmaps on our site with a combo of JS and CSS but the (much more advanced) developer helping me recommended that, to accomplish the type of new animations I am planning (zooming bitmaps that have animated loops playing on top of them and animations triggered by queues in a soundtrack), I should use GSAP. I've looked over some of the GSAP web pages and am impressed. My 2 newbie questions are: If I use the free version of GSAP, to build my whole app and then Greenstock goes aw
  6. I read through as much as I can find here and test with your pens by copying ma path to your example (https://greensock.com/docs/#/HTML5/GSAP/Plugins/DrawSVGPlugin/, and there my path works!), but I cannot find my own problem with this animation. The circle path fades in, but the animation is doing nothing... I am still very new to SVG and also to GSAP, but I did read all the docs already... but I am still in the dark somehow... any hint would be most welcome! Thank you in advance! Best regards, Robert
  7. I'm a newbie to Web Development and in the process of learning if GSAP can fill my animation needs. I am pretty sure it can. This is my second post. In my first post, I mention I am currently taking an E-course and I am in the middle of creating a javascript reaction tester application: http://codepen.io/KerryRuddock/pen/rLJPkq To view the codepen correctly, please change the View to Full Page. Click Start. A random sized and colored ball rotates around the screen based on a set of CSS keyframes: twirl This codepen is HTML, CSS and JS only, no GSAP just yet. The code is
  8. I'm trying to smoothly morph a square into triangle, in which the top corners slowly move towards each other, and meet in the middle. If you look at the Codepen, you'll see two rectangles turning into a triangle, one after the other, and in different ways. This was my process: I created the two SVGs in Illustrator. I created a 1-pixel stroke rectangle with a transparent fill, clicked Object > Expand, and then saved the SVG using "Save for Web and Devices". The triangle was created similarly, this time by adding an anchor point in the middle of the two top corners of a square, and th
  9. Hello, Animation which I try to do, works well with computers or iPhone, but if it fires on Android it can munch, unfortunately, is not smooth. Maybe someone is able to help me in what I was doing wrong and how to improve? The code is a mess, but this is the first time I try to move animations from CSS to JS. The alpha version for phones was not very smooth and able to "trim". After using GSAP is much better, but it seems to me that it might be better. In addition, some questions (GSAP, JS, CSS): 1) The problem with the grid. I can not set the width (50%) plus a margin? The elements are in
  10. 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
  11. Hi, I have a small issue with my scroller withing my mobile app. The issue is if I'm pressing, holding and dragging (up or down to wanted position) in one action, and then lifting my finger - the scroll will continue the animation of scrolling. It's like it "stores acceleration" - If my drag action is bigger, than the scroll will continue the animation more. How can I disable this "after scroll" animation? I just want a smooth and linear scroll. Can someone help? Here is my current code: ThrowPropsPlugin.to(buttons_container_mc, {throwProps:{ y:{velocity:yVelocity, ma
  12. Hi there, First of all, I love the things you guys make possible. The draggable spin was exactly what I was looking for. Unfortunately I am a complete noob with javascript or any coding whatsoever. I tried to make it work for the last couple of hours, but the fact is. It is not my cup of tea. But I am willing to learn. Could someone help me by explaining step by step, in a very childish way, what I need to do to make an object spinnable in Adobe Edge with Greensock? What I did so far: Put this in the html: <!--Adobe Edge Runtime End--> <script type="text/javascript" src="edg
  13. hey everyone I m really interested in these tools, and oh i m totally new to everything... question, how do I install these into my wordpress site... anyone can help with a setup instruction. i typically wanna use the scroll parallax functions, have a business package no idea where to start. my brain needs an dummy Actionscript i guess.....help thanks for your time
  14. The code below drives a button that toggles various div s on the page on and off, and changes it own visible state - from dellie to tellie: It works once as expected (usually) but the second time through,clicking dellie makes it disappear but tellie does not appear. Can anyone please help point out what I'm doing wrong? Or point to a better way of achieving what I'm after - a button that toggle show/hide div states. $("#dellie").click(function(){ TweenLite.to("#tellie", 0.5, {display:"block", ease:Back.easeOut}); TweenLite.to("#dellie", 0.0, {opacity:0}); TweenLite.to(".inac
×