Jump to content
GreenSock

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

Search the Community

Showing results for tags 'Javascript'.

  • 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

  1. Hi, Id like to know if there is a GSAP function that can create the effect of a mouse following the cursor
  2. SplitText is an easy to use JavaScript utility that allows you to split HTML text into characters, words and lines. Its easy to use, extremely flexible and works all the way back to IE9 (IE8 for GSAP 2's version). Although SplitText is naturally a good fit for creating HTML5 text animation effects with GreenSock's animation tools, it has no dependencies on GSAP, jQuery or any other libraries. Note that the video below uses GSAP 2's format. .videoNav { color:#555; margin-top: 12px; } 0:00 Intro 0:21 SplitText solves problems 2:01 Basic Split 3:34 Config
  3. GreenSock

    Draggable

    #container { margin:0; padding:0; font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 17px; line-height: 150%; } #container h1 { font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 48px; margin: 10px 0 0 0; padding: 0; line-height: 115%; text-shadow: 1px 1px 0 white; } #container h2 { font-family: Signika Negative, Asap, sans-serif; font-weight: normal; font-size:30px; color: #111; margin: 18px 0 0 0; padding: 0; line-height:115%; } #container p { line-height: 150%; color
  4. GreenSock

    CustomEase

    CSS animations and WAAPI offer cubic-bezier() which is great but with only two control points it's impossible to create more complex effects like bouncing, elastic, wiggles, rough/jerky eases, etc. Plus you can't make an ease return to its starting values (like a ball jumping into the air and falling back to the ground with a bounce). Features Unlimited anchors and control points. Copy/Paste any SVG <path> (including directly from Adobe Illustrator). Use CSS cubic-bezier() values (For example, from cubic-bezier.com). Editor has snapping, undo, sample code and
  5. Good day everyone. I have just completed my personal portfolio site which makes use of GSAP. However, it seems the animations are not playing and so the page remains blank. Everything works fine on my local server but when I uploaded my website to the dreamhost servers, the animations no longer work. There are no errors whatsoever on the console. I contacted the customer service and was told that in my error.log file it says the folder where all my GSAP.js files are located cannot be found. But looking at my panel, all files were uploaded successfully. Ok, in order to be sure it was not just t
  6. I am using BarbaJS for creating my Portfolio by using a <ul> for creating a Page-Transition. I have set up GSAP Animations and Many More such as AutotypeJS but they aren't getting fired neither are the CSS is getting applied after the Page transition is done. Once I refresh the page, The Animations gets fired. What could be the possible reason? gsap.from('.btn-blue', { opacity: 0, duration: 0.5, delay: 21, y: 50 }); gsap.from('.anim1', { opacity: 0, y: -100,
  7. Scrambles the text in a DOM element with randomized characters (uppercase by default, but you can define lowercase or a set of custom characters), refreshing new randomized characters at regular intervals while gradually revealing your new text (or the original text) over the course of the tween (left to right). Visually it looks like a computer decoding a string of text. Great for rollovers. See the Pen GSAP Scramble Text Plugin - feature plugin page by GreenSock (@GreenSock) on CodePen. You can simply pass a string of text directly as the scrambleText and it'll use the defaults for
  8. Feature lists are nice, but they can get lengthy and they don't always tell the story in a way that's relevant to you as the developer or designer in the trenches, trying to get real work done for real clients. You hear plenty about theoretical benefits of CSS animations or some whiz-bang library that claims to solve various challenges, but then you discover things fall apart in all but the most modern browsers or the API is exceedingly cumbersome or there are frustrating "gotchas". You need things to just work. .expander { cursor: pointer; font-weight: 400; position: relative;
  9. GreenSock

    GSDevTools

    Your animation workflow is about to get a major boost. GSDevTools gives you a visual UI for interacting with and debugging GSAP animations, complete with advanced playback controls, keyboard shortcuts, global synchronization and more. Jump to specific scenes, set in/out points, play in slow motion to reveal intricate details, and even switch to a "minimal" mode on small screens. GSDevTools makes building and reviewing GSAP animations simply delightful. Get Started Load the JavaScript file //be sure to use a path that works in your dev environment <script src="./js/GSDevTo
  10. As the author of GSAP I'm sometimes asked if the Web Animations API (WAAPI) will be used under the hood eventually. My responses have gotten pretty long so I thought I'd share my findings with everyone here. Hopefully this sheds light on the challenges we face and perhaps it can lead to some changes to WAAPI in the future. WAAPI is a native browser technology that's similar to CSS animations, but for JavaScript. It's much more flexible than CSS animations and it taps into the same mechanisms under the hood so that the browser can maximize performance. Overall support is has gotten pretty
  11. Hi there! I'm newbie with GSAP but really enjoy using it!!! I'm currently trying to build a hover for my site company that play a video on background when hovered. As you can see on the code pen exemple, it works great. My problem is: I would like to pause the video after the the timeline reverse completely. I can find how to delay the pause fonction or using onReverseComplete in the timeline properties but nothing work... Another solution would be to just pause the video and not going back to 0 but the fix img (.img) doesn't come back. But I can't find
  12. I have created a product list page where every thumb image will have a zoom effect. the zoom effect code is working fine in the pure javascript. but my project is in vuejs and I wanna achieve same effect in my vue component. I already made my component and put some code in vuejs way. but it's not working right way. when I clicked it jumps to top left and then zooming. Here is my sandbox link in vuejs. Maybe I am missing something or there is have a better way to write this pure javascript code to vuejs way. it would be appreciated if any expert takes a look and give me the solution.
  13. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .loading{ background: orangered; position: absolute; top: 0; bottom: 0; right: 0; height: 100%; width: 100%; z-index: -99; } button{ padding: 10px
  14. I want to animate the background, If click the button background will be animate, It works fine except that after one click, It doesn't work again. <body> <div class="loading"></div> <div class="btn"> <button>CLick</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js "></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js "></script> <script> $('button').click(function () { ld_gray = gsap.from('.loading', 1,{delay: 0.5, scaleX: 0, t
  15. Have you ever wondered why GreenSock doesn't use a more common open source license like MIT? Sometimes our licensing model is misunderstood but hopefully after reading this article you'll see why it is so foundational to the success of our tools and why it ultimately benefits users too. Open source is awesome! If you had to write and maintain your own jQuery or React or GSAP, could you do it? Would it be as refined and reliable? Probably not. How many times have you found a library or chunk of code on github that saved you hours of development time? Open source can be a quick path to
  16. Hi! I've come across this especially unique combination of effects, and have been left in both awe and pain trying to figure out how to replicate such a complex stringes of elements. I've already done some research to figure out the basics of its mechanics, but as someone new to coding, my understanding is limited still. The site and effects in question are: Home Page - https://panamaera.fr/ 404 Page - https://panamaera.fr/404 About Page - https://panamaera.fr/about There seem to be two effects at play. A Canvas over images/videos, that generates a smokey dis
  17. https://css-tricks.com/tips-for-writing-animation-code-efficiently/
  18. I'm trying to test out a scroll hijacking method I saw on http://www.adidas.com/us/climazone. On that page, they have a fixed position container with everything in it absolutely positioned and on page scroll they translate3d the elements up -Y scroll position which I can do but they key ingredient they add is easing to that scroll tracking. So as you scroll the elements follow "recreating the scroll effect" but upon release slowly ease into their final place which is the end Y scroll position. I've found this StackOverflow question, https://stackoverflow.com/questions/25056769/how-
  19. Hi, I creating a website and i using TweenMax. I've created line animation like this; Its connected with scroll. Animation is like that; First left long line going down then bottom line goes to right then right line starts from bottom to top finally top line start from right and goes to left and animation is ends. At the end we had this image. But there is something it will drive me crazy. At the start of animation lines goes normal (fast). But when its ending its very slow down like smoothing. Example at the start of animation i scrolling 1 click, lines with changes
  20. GreenSock

    TweenMax

    Note: TweenMax has been deprecated in GSAP 3 in favor of the streamlined gsap object. It has 50+ new features and is almost <strong>half the size!</strong> GSAP 3 is backward compatible with the vast majority of GSAP 2 features including TweenMax. Please see the Migration Guide for details. TweenMax lets you animate literally any property of any object that JavaScript can touch (CSS, SVG, React, Vue, Three.js, canvas, motion paths, generic objects, etc.). Before the release of GSAP 3, TweenMax was the most feature-packed (and popular) animation tool in the GSAP arsenal. Howe
  21. Hi everyone, I have a simple problem to solve ( I'm sure that's something dum ): I have some points as bezier curve, and I'm animating a Svg along that path. This is the code: let flyMove = new TimelineMax({ ease: Linear.easeNone, repeat: -1, paused: true }); flyMove.to("#" + id, 12, { ease: Linear.easeNone, bezier: { values: [ { x: startPointX, y: startPointY }, { x: randomMove(xLimitMin, xLimitMax),
  22. Image is getting called multiple times in network section of dev tools. when i am using BezierPlugin GSAP 2.1.2 and assigning image as css background issue.zip
  23. GreenSock

    Ease Visualizer

    The ease-y way to find the perfect ease A solid mastery of easing is what separates the top-notch animators from the hacks. Use this tool to play around and understand how various eases "feel". Notice that you can click the underlined words in the code sample at the bottom to make changes. Some eases have special configuration options that open up a world of possibilities. If you need more specifics, head over to the docs. Quick Video Tour of the Ease Visualizer A special thanks to Jamie Barlow who built almost the entire thing. He's one of our all-stars in the forums, lendin
  24. GreenSock

    BezierPlugin

    Note: This plugin was replaced with MotionPathPlugin in GSAP 3. Please see the GSAP 3 release notes for details. Animate virtually any property (or properties) along a curved Bezier path which you define as an array of points/values that can be interpreted 4 different ways (described as the Bezier's "type", like type:"soft"? "thru" (the default) - the plugin figures out how to draw the Bezier naturally through the supplied values using a proprietary algorithm. The values you provide in the array are essentially treated as anchors on the Bezier and the plugin calculates the contro
  25. Hi there! Im looking for a professional to start a partnership. I have a demand of a new customer that needs a Full Stack Developer that are very skilled in Greensock and/or Adobe Animate. This project will be for a world known company that leads his market, so its a great opportunity. At this moment we need two person to deal the amount of work we will have if we got this contract. The customer said about 150 projects a month. I'd like to be very clear about all details. This is a project in building step, and I need your help to make it happens
×