Jump to content
GreenSock

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

Search the Community

Showing results for tags 'codepen'.



More search options

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

  1. Thank you for creating such an amazing tool for animation and supporting community. I have a question about way how Gsap is creating an order of properties for transform while tween/set. As i understand based on documentation, skew properties come after scale properties (this is exactly what i need), but when im trying on a practice i see the opposite result where skew is coming before scale properties. Can you please help me to understand why this happen and how can i change this? I have attached codepen comparing two results: first one i've set up using css and pick the order by myself, second order was created using gsap set. Im working on complex animation, part of this animation using scale and skew properties, but im getting wrong result when skew coming before scale. Thank you so much.
  2. 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: GSAP 3 Starter Pen: https://codepen.io/GreenSock/pen/VoZNxw GSAP 2 Starter Pen: https://codepen.io/GreenSock/pen/VoZNxw To create a demo with all of GSAP including 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.
  3. Are you familiar with CodePen Challenges? In June 2020, GreenSock got to host it! We decided that it'd be fun to have a competition and give away 3 "Shockingly Green" Club GreenSock memberships each week! What is a CodePen Challenge? CodePen is a site where you can create and share small frontend web projects that you've made. You can also start with another person's creation and then modify it to become your own creation (this is called forking). Every month, CodePen hosts 4 weekly challenges with different themes. They host these challenges to help you improve your frontend skills, express yourself, and have some fun! How did this competition work? Every Monday this month, check the CodePen Challenges page for the new theme (you can sign up there for notifications too). Then make something based on that theme! It could be anything. Each week we will provide some different ideas to get you started, but you can create anything so long as it fits the challenge prompt that week. To submit entries to the competition, people tagged @GreenSock on Twitter along with a link to your pen. At the end of the each week, our panel of judges went through and pick their favorite pens that were created that week. The creators of the top 3 pens each week received a one-year "Shockingly Green" Club GreenSock membership on us! Who were the judges? Meet our lovely judges for the GSAP CodePen Challenge Competition (you should follow them!): Aaron Iker Adam Kuhn Annie Liew Cassie Evans Chris Gannon Craig Roblewsky Jhey Tompkins Lisi Linhart Louis Hoebregts Lynn Fisher Olivia Ng Pete Barr Shaun Gorneau Steve Gardner Tom Miller Una Kravets What's this week's challenge? Unfortunately the CodePen Challenge competition is over. But you're free to follow the same challenge prompts to inspire you to create something! We'd still love to see it. You can view all of the challenge prompts on CodePen. The winners Week 1: Sequencing Congratulations to our week one (sequencing) winners: Benoît Wimart, Sicontis, and Cristobal Garcia! Be sure to check out the rest of the submissions. modulofont Sequencing (Mom’s Diner) .cCmsCategoryFeaturedEntry .cBlackContent a { text-decoration: none; } html[dir="ltr"] .ipsGrid_span4:nth-child( 3n+1 ) { margin-left: 2.127659574468085%; } Taika cruising through La Gran Sabana Week 2: Bubbling Congratulations to our week two (bubbling) winners: Louise Flanagan, Oscar Salazar, and Wendy Kong! We had to bring in an extra judge to break ties because the voting was so close so be sure to view all of the submissions as well. Bubbly Bath Bubbles Bunny Breathing Exercise Week 3: Sliding Congratulations to our week three (sliding) winners: Oscar Salazar, Wendy Kong (both are winners two weeks in a row! Very impressive.), and ycw! You can view all of the submissions here. Slash GSAP Penguin Blue Room Week 4: Scrolling Congratulations to our week four (scrolling) winners: supamike, Ismael Martínez, and Shunya! View all of the submissions here. 3D Banners Personal Page Underwater Scrolling Animation Thanks so much to all who participated. We couldn't have ran this competition without you!
  4. Hello all-- I'm currently converting an old Codepen that uses TweenMax 1.2 to the new GSAP 3.1 lib. I've gone through the docs and converted everything per the spec, but my animations are failing to actually fire, and with no warnings in the console, I'm currently lost. My suspicion is that it boils down to these two lines being improperly formatted, but I'm not sure what's wrong. I've added firing and killing functions to both pens for testing, spawnTrees() and killTrees(). Ln 80/81: .add(gsap.to(branches, {duration: 0.5, drawSVG:'100%', ease: "power1", stagger: 0.03}), '-=0.25') .add(gsap.to(branches, {duration: 2, rotation: 0, ease: "elastic", stagger: 0.03}), '-=1.25'); For reference, below is the Codepen that I'm converting. I'm eager to see what's going on here so I can continue adding onto this animation sequence 😃 https://codepen.io/paulkmiller/pen/VwLKLpo
  5. Hi, I have recently started learning animation on the scroll, but I have a problem that I cannot solve. I made a very simple block layout. Using the well-written SmoothScroll class by Blake Bowen https://codepen.io/osublake/pen/vvRWQd I would like to expand it a bit to be able to scroll horizontally. I would like it to work like this: scrolls down the page normally until block number 5, when block number 5 touches the top of the screen it blocks and scrolls to the right until block number 7 and then again scroll down from block 8 to the end of the page. Back, it looks the same only in reverse order. However, I was able to do something like this on a normal scroll and not on a transform. I am asking for help with this. Thanks Sorry for my English :[
  6. Hello everyone, I've just upgraded my project to GSAP v3, but CSSRulePlugin doesn't works properly anymore. In a first time i've thinked that was a problem behin the CDN delivery but after few tests, i can't see where exactly is the problem. Below, the console warned me about stuff extends with CSSRulePLugin. Someone can explain to me what should i change to make it work ? Thanks you by advance !
  7. Hey there! Can anyone help me with this? I am new to this thing, really trying hard to get my hands dirty with tweenMax. PROBLEM: I am trying to animate text in words by using SplitText, The thing i am trying to do is to change text on repeat. but can't do so. https://fastfoodsignage.herokuapp.com/ go to the second section, There is an animation, I am trying to give it YoYo effect, so it can look like a typewriter, and on repeat want to change innerHTML and update the splitText Codepen link: https://codepen.io/ifaizanahmed/pen/qBWgZGg demo1.mp4
  8. 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.
  9. 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.
  10. 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!
  11. 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
  12. My animation working perfectly in normal codepen pens NOT codepen Projects. Should I buy club membership even if I'm using in Codepen projects?
  13. 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.
  14. chagui

    Input range slider

    Input type range slider in progress...come soon nice day, gui
  15. 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.
  16. 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
  17. pati

    Animated waves effect

    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
  18. 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>
  19. 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
  20. 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
  21. 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)
  22. 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!!!
  23. 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!
  24. 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.
  25. 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.
×