Jump to content
GreenSock

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

Search the Community

Showing results for tags 'codepen'.

  • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 20 results

  1. We love answering GSAP-related questions, but in order to get you a fast, accurate answer, it is very important that you provide code we can test. Your problem may be related to CSS, HTML, or JavaScript (or a mixture of those). If you only provide a tiny code snippet (outside of its context), it's difficult to diagnose. And it's just not practical to read large chunks of code in a forum post. We need code that we can dig into and play with...quickly. We are big fans of CodePen.io, an online editor that allows you to create (and share) demos that are easy to inspect and edit. They make isolating issues much faster. Watch How it is Done: GreenSock Bonus Starter Pen To create a demo with all of the tools in TweenMax and every bonus plugin: Click Run Pen in the demo above Click the Edit on CodePen button Click the Fork button to create your own copy. Add the minimal amount of HTML, CSS and Javascript necessary to replicate your issue. Save the pen Paste the URL of your pen (demo) into a new forum topic with a short description of the problem. Include OS, browser and device information where applicable. CodePen is completely free to use and you don't even have to sign up or log in. We do recommend creating a free account as it will allow you to save and organize your pens and much more. The special "trial versions" of the bonus plugins also work on the following domains: codesandbox.io stackblitz.com jsfiddle.net Use the pen below to easily copy and paste the urls to the bonus plugins: Thanks for your cooperation. We look forward to helping you.
  2. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Before jumping into Club GreenSock for the super-cool bonus plugins, perhaps you're plagued by questions like: Will the bonus plugins work well for my project? How difficult is the API to work with? Will they play nicely with my other tools? Will they work in Edge? Firefox? ... That's why we created special versions of the plugins that can be used on CodePen anytime...for FREE! The video below shows how to get up and running fast. Video Demo with quick-copy URLs See the Pen Try Club GreenSock Bonus Plugins FREE on Codepen by GreenSock (@GreenSock) on CodePen. Template (fork this): See the Pen GreenSock Bonus Starter Template by GreenSock (@GreenSock) on CodePen. Of course we offer a money-back satisfaction guarantee with Club GreenSock anyway, but hopefully this helps give you even more confidence to sign up. CodePen is an online, browser-based editor that makes it easy to write and share front-end code. If you need help using CodePen check out their interactive editor tour.
  3. Hello, I am doing some animation on my nextjs application, using jquery. You have the code in codepen. The problem is that app is SPA (Single Page Application), and every time a move to a new route, the menu in the left shows great, but the text takes time to render. The first time app loads, it loads just like in codepen. Then when navigate to other page, i need to wait 1 second for text start animate. Then move to another page and it takes 2 seconds to start animating and showing text. While the background from the menu is showing great. The problem i guess is with that staggerTo method, since that is the one that does that.
  4. Hello, I am having a problem in creating a hover dropdown using GSAP animations to stagger in links after the container fades and drops in. After the user hovers off, it does another timeline in reverse. However, if a user were to go back and forth too quickly there are partial or full loops of the animations over and over depending on the swipes across the trigger. I am wondering if there is a way GSAP knows and animations are playing and will not allow another set to run if another is playing. Something along the lines of if tl starts and the user hovers off then it finish before starting timeLine's animation...? Thanks in Advance!
  5. Hello everybody, I have a simple question. Probably my problem is easy to fix, but I can not figure it out... My question is: How to import an audio file / mp3 file to codepen.io? I've seen many examples and I can't import my own audio file in my codepen file. I've download this audio file in mp3 format. This is the audio that I want to use. How do I convert this YouTube audio into this line of code? --> playFile('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/success.mp3') I hope I am clear enough. Thanks in advance
  6. My animation working perfectly in normal codepen pens NOT codepen Projects. Should I buy club membership even if I'm using in Codepen projects?
  7. Hello. I tried to get a kind of focus helper with the mouse when the pointer rolls over an item. but i can get a good easing when the mouse are hover a element. I do not know if I explain myself well, but I will try. i use the pointerLock API. when the mouse icon get hover a new elements, i want to help the mouse to move to center of element. But without disturbing the control of the mouse. the idea is to create a focus helper to center the pointer on the elements when the mouse has a contact with the outlines. i try my best to make a codepen. for active the pointer lock, just click inside the blue square. if your move the mouse, your will see that the behavior is a little messy when the mouse flies over a white square. An idea on a good approach to create a similar system? thank a lot for help.
  8. chagui

    Input range slider

    Input type range slider in progress...come soon nice day, gui
  9. hey guys, i'm new to GSAP & I'm not quite sure what I'm doing wrong here. the desired effect is a fade in when the menu opens & a fade out when it closes, but for some reason i can't get the fade out part to work. here is a link to my codepen. i suspect i'm making a pretty dumb mistake. here's my js: var root = document.documentElement; var body = document.body; var pages = document.querySelectorAll(".page"); var tiles = document.querySelectorAll(".tile"); for (var i = 0; i < tiles.length; i++) { addListeners(tiles[i], pages[i]); } function addListeners(tile, page, menu) { tile.addEventListener("click", function() { animateHero(tile, page); }); page.addEventListener("click", function() { animateHero(page, tile); }); } function animateHero(fromHero, toHero) { var clone = fromHero.cloneNode(true); var from = calculatePosition(fromHero); var to = calculatePosition(toHero); TweenLite.set([fromHero, toHero], { visibility: "hidden" }); TweenLite.set(clone, { position: "absolute", margin: 0 }); TweenLite.to('.k-nav-list li', 0.6, {opacity: 0}); body.appendChild(clone); var style = { x: to.left - from.left, y: to.top - from.top, width: to.width, height: to.height, autoRound: false, ease: Power1.easeOut, onComplete: onComplete }; TweenLite.set(clone, from); TweenLite.to(clone, 0.3, style) function onComplete() { TweenLite.set(toHero, { visibility: "visible" }); body.removeChild(clone); TweenLite.to('.k-nav-list li', 0.6, {opacity: 1}); } } function calculatePosition(element) { var rect = element.getBoundingClientRect(); var scrollTop = window.pageYOffset || root.scrollTop || body.scrollTop || 0; var scrollLeft = window.pageXOffset || root.scrollLeft || body.scrollLeft || 0; var clientTop = root.clientTop || body.clientTop || 0; var clientLeft = root.clientLeft || body.clientLeft || 0; return { top: Math.round(rect.top + scrollTop - clientTop), left: Math.round(rect.left + scrollLeft - clientLeft), height: rect.height, width: rect.width, }; } the part that is actually changing the opacity for the element i want is TweenLite.to('.k-nav-list li', 0.6, {opacity: 0}); and TweenLite.to('.k-nav-list li', 0.6, {opacity: 1}); but obviously i'm misunderstanding what's going on here. any help is greatly appreciated.
  10. So my issue is that everything in my tweenMax is working except the left part - it is changing color and things are good but not the movement.Why is that happening?Thanks
  11. Hi, I would like to animate two lines as they move as waves. I want something like this, but with the two lines and moving slowly, like the sea. http://codepen.io/winkerVSbecks/pen/EVJGVj Does anyone know how to do this? Thank you
  12. Hi, I've created this animation: http://codepen.io/anon/pen/VerMWX, but when I paste it to my code, it doesn't work... do you know if I need to add a link to a Greensock file or something like this. The only link that I have on my header at the moment is: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
  13. If i repeat timeline comand tl.from(head, 0.5, {left:100}); it will repeat objects movement stating from position defined in css. Is it possible to move same object several times from previous position? So instead of tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:200}); - 100px tl.from(head, 0.5, {left:300}); - 100px it would be tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:100}); - 100px
  14. squxd

    SVG Hovers Cont. -

    Hey all - As you may or may not have seen my previous post, this one has a few different issues I was unsure of how to fix. I am pretty satisfied at this point. The only other things I was struggling with were... 1) When hovering over the "U" or "D" to highlight the other svg's (U-X-D) blue. I was using the ':not' some in $(".blue-uxd:not(#diamond)").hover(function(){ joinButton.hide(); uxdButton.show(); 2) This line works but there are still some issues where the diamond does not return to a full 100% and stops mid-hover. And when animating back up it still fades quickly from black to blue. Could I use a switch or something that only activates if the diamond reaches the top/floating step? TweenLite.from("#diamond", 1, {fill:"#00bbd3", progress:0}) 3) And when I hover over the "X/A" the " join button fades out and the "What are you waiting for?" fades in right after... $("#xa-flip").hover(function(){ button.hide(); uxdButton.hide(); joinButton.hide(); hiddenButton.hide(); joinButtonActive.show() TweenMax.to("#joinButtonActive", 6, {delay: 2, autoAlpha:0}); TweenMax.staggerFrom("#hiddenButton", 2, {autoAlpha:0}); joinButtonActive.hide(); hiddenButton.show(); }, function(){ joinButtonActive.hide(); hiddenButton.hide(); button.show(); joinButton.show(); }); thank you very much, nick
  15. squxd

    SVG Hover Animation

    1st post and it's a little rough... - I've been trying to create some hover animations on an SVG lately. Take a look at the codepen link (hover on x) to see where I'm at... My goal is to hover on the "X" and have the "A" flip/rotateY(180deg) to reveal. And when the mouse is off, have the "X" flip back. I will also mention/ask for further help having the diamond animate up and then back down relating directly to the hover of the "X". notes: - I know the "X" and "A" svg <path d=> are what is causing the width to be so far apart on rotation. This is to have the "X" in the correct placement within the file. (I have tried 'cropping' the SVG of "X" and "A" but the position/location is off. Question: - can I set a rotation orgin point manually? or do you think I should even be using more JS/GSAP to accomplish these effects? *There are actually even more interactions I have thought up - however they can wait until this problem is resolved, Thanks for ANY & ALL help! (I haven't found many examples of SVG hover animations)
  16. Hi all, I tried creating a new preloader using GSAP. And it turns out good... I just wanted to share this here... Thank you Cheers!!!
  17. GSAP Bezier Curve ViewerI've been working with bezier plugin quite a bit recently and made a tool to help visualize the curves as creating them blind is no fun! At its heart it's just this function, which should work to visualize any tween (uses jQuery): let visualizeTweenMaxBezier = (tween, steps) => { for (let i = 0; i < steps; i++){ tween.progress(i/steps); $("body").append("<div id='point" + i + "'></div>"); $("#point"+i).css({ position: "absolute", width: "2px", height: "2px", "background-color": "#7F7F7F", top: tween.target.css("top"), left: tween.target.css("left"), }); } tween.restart(); } Currently it generates code based on screen pixel values, if people are finding it useful though I might update it to generate code based on screen percentage, or percentage positions within the containing element. Happy coding!
  18. Hi Carl, I want to execute a moderately difficult timelinemax anumation. Every time I check out http://greensock.com/position-parameter I see the Visualizer. It reminds of Flash and I start getting illusions of an After Effects Timeline visualizer. Any news on this? Is it up for sale as a plugin? I would pay. I need to stop the illusions.
  19. I was wondering whether it is allowed/disallowed to use club-greensock plugins in codepens? Either via the private assets (codepen pro) or by linking it from some server.
  20. madina

    Machine Gun Effect

    Having trouble getting the Greensock machine gun effect to work on my site. I took the code used from codepen... http://codepen.io/GreenSock/pen/AGzci Cant for the life of me figure out why this isn't working on my site... http://madina.co.uk/test/ Please could you shine some light on this? I need some kinda trouble shooting article Thanks Mark
×