Jump to content
GreenSock

Search the Community

Showing results for tags 'gsap'.

  • 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. Hello ! I want to clone top 3 box(Top draggble1, Top draggble2, Top draggble3) randomly to the bottom random boxes.After clone to boxes it's move to inside black boxes both direction. How i can achieve this ?? thanks !
  2. HI Folks! I've been trying (very unsuccessfully) to build a portfolio site with GSAP and Barba.js I initially built everything with CSS animations as per www.frontenddevelopment.com.au/dev, but failed to get it working yesterday, so I rebuilt it stripped down in a couple of hours today with GSAP. Unfortunately, despite following Barba's documentation, I cant seem to get it working and after 9 hours today I'm pretty frazzled. It may be something silly that I've overlooked due to being so tired. Obviously CodePen is not the right vehicle for a multipage site and I'm not enamoured with it enough to buy a full membership, I spent it on a Club Greensock membership instead. I know that this is a bit off topic, but GSAP and Barba.js is a formidable combination, so I'm hoping that someone can help me get this wireframe working! AS you can see form the site on my dev server, I'm also embedding canvas elements as well. Thanks so much! Andy :) about.html contact.html index.html projects.html main.js transitions.js main.css
  3. Hello friends, when i scroll i want the svg to continue as a downward mask. How can i do that? Can you help me i have a presentation tomorrow. thank you so much... Examples; https://www.lemonade.com/giveback-2019
  4. Hello ! I am using Draggable plugin for drag component with cloneing element. cloneing are working on my version. But is there any way to drag elelemnt to specific box/class(multiple class)/custome box. Like screensort red drag box only drag on bottom row (marked red border). and green will drag in green border full wrapper(with red area too). If in the box already have exits element that will not aapend inside that.
  5. Welcome back to our getting started guide. If you haven't read part one, you can find it here. Let's continue with timelines... Timelines Timelines let us create adjustable, resilient sequences of animations. Below is a simple timeline containing three tweens. By default, things are added to the end so they play one-after-another. // create a timeline let tl = gsap.timeline() // add the tweens to the timeline - Note we're using tl.to not gsap.to tl.to(".green", { x: 600, duration: 2 }); tl.to(".purple", { x: 600, duration: 1 }); tl.to(".orange", { x: 600, duration: 1 });
  6. hello everyone, thanks for reading. i want to navigate to section by clicking dot Indicator. i have tried to change the Observer code but couldn't Understand the Logic to Sync Both. please Give Me your guidance. thank you very much.
  7. I apologise about the codepen missing images, But i am trying to make a tree that scrolls horizontally and make about a dozen leaves fall with different paths, all while the background moves to a side at the moment i am struggling to make both work properly, if both do end up working the leaf is slower than the background and stays way too far behind or it simply stops at around the middle of the screen and i am trying to make the leaves fall to the ground is there any advise you could give on the issue? Thank you
  8. Hi Folks I've (sort of) recovered from a nasty dental issue and I've been experimenting (in between bouts of pain) with some sliding panels. Please refer to the attached Code Pen, now that I've worked out its idiosyncrasies. My questions are as follows: Panel 1 - I've managed to get the text animated inside the panel, I've tried a few different CSS tricks to get the "BIG TEXT" sitting behind the other text as a watermark. Obviously I've tried z-index (and wrapping the three text elements in other divs inside the panel), but it appears to affect the entire text due to what I'm assuming is GSAP determining the z-index of the panels dynamically? Panel 2 - I'm trying to animate the two boxes without much success, I was under the impression that I could determine the trigger points using "left" and "right" properties, but this doesn't appear to work. Snapping - the panels are currently snapping at 50% of either the page width or height. This is probably a fairly complex way to start off with GSAP and ScrollTrigger, especially given that I haven't worked as a Front End Dev in 11 years (I was a Flash AS2 dev, anyway) and I'm still blowing the cobwebs out of my CSS skills - it's changed somewhat over the last decade (obviously for the better). I've generated the panels dynamically successfully, but as you can see the rest of my code is pretty clunky, to say the least. Any pointers as to how to make my code cleaner and to get things animating around the panels would be greatly appreciated. I've spent a full day on this and spent the last few hours of it running around in circles. I'm fairly happy with my progress, but I think I need to use another couple of loops to get it working properly. Thanks so much! Andy 🙂
  9. Hey all, I am using Adobe animate and am a beginner in GSap. I am trying to do a hover over effect but somehow... cant get it to work. Above the script i have placed this. var textDisplay = root.textDisplay_txt; in the animate canvas i have a dynamic text object with the corresponding instance name "textDisplay_txt" so now i need to get some text in there when i hover over a logo. In this case an AMD socket logo. (could even be an image map or anything else for that matter i guess) The eventlisteners work.. i just dont know what to use here as a property, scaling works. Note the line text? : <p>blabla</p>... thats where i need to do somehting i think., though i am pretty clueless at this point. root.logoAmd_mc.addEventListener('mouseover', logoAmd_over); root.logoAmd_mc.addEventListener('mouseout', logoAmd_out); function logoAmd_over(){ var logoAmd = root.logoAmd_mc; gsap.to(logoAmd,{ scaleY : 1.1, scaleX : 1.1, }); gsap.to(textDisplay,{ text? : <p>blablabla</p> }); } function logoAmd_out(){ var logoAmd = root.logoAmd_mc; gsap.to(logoAmd, { scaleY : 1, scaleX : 1, }); }
  10. [Update: We have now found a wonderful freelancer, thank you everyone!]
  11. Hi Folks What a wonderful thing GSAP is, thank you so much! I was a Flash AS2 developer 11 years ago and used your tween library religiously! I've just finished Carl's wonderful GSAP express course and joined his wonderful Creative Coding Club, I've yet to do his scrollTrigger Express course (i'll start it tomorrow as per my usual Suzuki Method), I threw myself in the deep end and built my first hand coded website in over a decade - my how things have changed! It would appear that the DOM has now caught up with Flash - albeit 10 years later! I have my little recording studio website attempt sitting on my dev server, I can't replicate the issues in CodePen and, to be honest, I don't like it anyway - I'm used to VSCode and Sublime text and a good old fashioned webkit browser. Please refer to www.studioprojects.com.au/dev - hopefully that will give you what you need to help me sort of the mess that I've created! I was feeling rather pleased with myself this morning until I started populating the site with content - such is life The issue that I'm having is as follows - I' currently in Thailand and working on my laptop which only has 1366 x 768 resolution on both the laptop monitor and the AOC USB monitor that I use as a second monitor whilst travelling. What I have built kind of works (at that resolution), but I can't add any more content to each section than is currently there already (it would appear that I can't have content any more than 200px above the bottom of the browser), it's most probably how I'm pinning things, I'm a little rusty with CSS, but it appears t be OK. When I test it on mobile (both off my dev and using dev tools) it breaks - no surprises given the complexity of what I'm trying to build as a first attempt after being relegated to WordPress (yuk) for a decade. It's probably something quite simple and I'm sure that I'll feel rather silly - any constructive criticism and advice are more than welcome - it's been a long time since I've tried to build something outside of the considerable constraints of WordPress. Best Regards Andy
  12. I want to create a stagger effect using ScrollSmoother. I wrap individual letters of a word inside a span and then apply lag to each of them. This works well. But when I introduce an h1 tag as a wrapper for these spans, this no longer works. Any suggestions?
  13. I'm trying to create a roadmap animation using GSAP ScrollTrigger. I'm stuck at syncing the timeline that reveals the line and the timelines that reveal the dots. I'm not sure how I can achieve the following: 1. Keep the edge of the line always at the center 2. Fade in the dots at the center. I suspect my approach isn't the right one? Any pointers are much appreciated!
  14. Hi, I have an animation that I'm having issues with. I'm trying to reveal a text while also push the logo at the same time (look video reference) but I can't do it smoothly. On my codepen it shows a big jump for the logo image once the text is reveled. Any help on how can I solve this? Screen Recording 2022-06-23 at 15.32.07.mov
  15. Hey Everyone, i'am trying to Animate a Group inside of an SVG based on if the Path is scrolled past the Point. Currently the Point is getting visible once the Page loads. But it should only appear or disappear if the line has moved past that Point. I've tried to put it into the Timeline but it didn't seem to work. It should be linked to the ScrollTrigger as the Path animation. Thanks in advance for the help!
  16. I'm creating a background effect from blur to clear when scrolling. starts with filter: blur(30px) when image enter viewport. and then more clear with filter: blur(0) after top of image reach top viewport using gsap fromTo and add utils for css filter. but i have no idea for now. can help please?
  17. I am new to web dev and so to gsap plugins. The drawSVG didn't seem to work. Then i removed drawsvg:0 and the code recompiled , I could see my logo and then I added drawSVG: 1 and the code recompiled and the animation was visible and then when I reloaded the animation was gone as well as the entire svg . I have attached my code files . please have a look. import './index.scss' import LogoV from '../../../assets/images/logo-v5.png' import { useEffect, useRef } from 'react'; import gsap from 'gsap-trial'; import { DrawSVGPlugin } from 'gsap-trial/dist/DrawSVGPlugin'; const Logo = () => { const bgRef = useRef(); const outlineLogoRef = useRef(); const solidLogoRef = useRef(); useEffect(() => { gsap.registerPlugin(DrawSVGPlugin) gsap .timeline() .to(bgRef.current, { duration: 1, opacity: 1 }) .from(outlineLogoRef.current, { drawSVG: 0, duration: 20 }) }, []) return ( <div className="logo-container" ref={bgRef}> <img ref={solidLogoRef} className="solid-logo" src={LogoV} alt="V" /> <svg width="700pt" height="900pt" version="1.0" viewBox="-20 -900 1000 1400" xmlns="http://www.w3.org/2000/svg" > <g className="svg-container" transform="translate(-50 420) scale(.1 -.1)" fill="none" > <path ref={outlineLogoRef} d="M5210.8,1.1l-5210,10270h1590l3690-7130l2950,5800l-576.1-17.5l-83.9-2.5h-1710l350-900l-930-1650l-1480,3900h6700L5210.8,1.1z M10501.3,10270.9l0.4,0.7H3800.1l0.3-0.7l1480-3900l0.4-1l0.5,0.9l930,1650l0.1,0.2l-349.8,899.5h1709.3l659.2,20L5280.8,3142.2l-3689.6,7129.1l-0.1,0.3H0l0.4-0.7l5210-10270l0.4-0.9L10501.3,10270.9z M1590.5,10270.6l3689.9-7129.7l0.4-0.9l2950.4,5800.9l0.4,0.8l-660.8-20H5860.1l0.3-0.7l349.9-899.8l-929.4-1648.9l-1479.4,3898.3H10500L5210.8,2.2L1.6,10270.6H1590.5z" strokeWidth="4px" stroke="rgba(0, 255, 81, 0.57)" /> </g> </svg> </div> ) } export default Logo SCSS .logo-container{ z-index: 0; width: 500px; height: 620px; position: absolute; top: 0; right: 15%; bottom: 0; left: auto; margin: auto; svg{ width: 100%; height: auto; bottom: 0; transform: rotateZ(30deg) !important; } .solid-logo { position: absolute; top: auto; right: auto; bottom: auto; left: 0; margin: auto; width: 100%; opacity: 0; transform: rotateZ(30deg); z-index: 1; } } .svg-container { stroke: rgba(0, 255, 81, 0.57); stroke-width: 4px; }
  18. I am using React as part of my stack. I have two elements: 1. A circle, made up of a div using css to style it 2. A square, made up from an svg using a fill colour. I want to be able to use a library, possibly gsap, to programatically trigger the change in position of the both elements from position (x,y) to position (x,y) on the screen using a custom path (svg) or bezier curve. With the above in place, I want to be able to apply a motion blur to the circle and square to enable it to look as if there is a blurred trail behind it. Can anyone recommend me the the right tools to achieve the above?
  19. Hey there, gsap novice here I have a simple fade-in animation on my site. However, the first time the animation loads, the whole site janks and the animation doesn't look good. All subsequent times look extremely smooth. I've tried to recreate it in a codepen, however, there the code seems to work flawlessly. I have no other scrollTrigger or gsap animation on any of the here targeted elements. Did anybody already have that problem and see a solution? Thanks in advance!
  20. Hello everyone, I have a problem which I had for multiple projects already. Whenever I use from in a timeline, combined with Scrolltrigger, it doesn't work. Using a timeline without scrolltrigger it seems to work fine. The codepen I added is an example. GSAP Example From (codepen.io) I recreated the same example with .to instead of .from and you can see it works fine. GSAP Example To (codepen.io) Can anyone help me with this problem? Thanks in advance.
  21. Cyber Division is an international research and development company.We are looking to bring a new identity and experience through implementing GSAP by Greensock to our website to make it more advanced and provide our users/clients with a new immersive flow that will showcase our history and achievements.Our new brand identity and UI/UX Design are done within our creative departments who pieced together all the required assets and elements to define the direction of the website when it comes to animating it.We have also pieced together a moodboard for the animations that we want to implement into the website and we are willing to assist through multiple calls and meetings throughout the journey of the creation of this website.The website is currently being developed using Next Js through two developers in our development department.What we have ready as pages to be animated are :- Landing Page- Contact PageAnd the website consists of more than 4 pages.If you think you are a good fit for this short-term position please apply and keep in mind that we have more projects to come that will require the GSAP expertise.
  22. Hello! I am new to using GSAP so I apologise if I follow an incorrect format. I'm currently creating an interaction map that is made out of SVG that uses zoom and pan. I have used multiple solutions (specifically this one) from other topics related to my idea and tried code from CodePen created by other users. At the same time, I am using p5.js which I noticed that this library can be used with. The issue I'm facing is when I try to implement the zoom/pan interaction from one of the examples, it causes an error when I try to interact with the SVG: "Uncaught TypeError: point.matrixTransform is not a function". I was constantly searching for the exact cause until I have removed the "setup()" and "draw()" functions which causes the interaction to work. Nothing else could have interefered as I have created a completely new project that only contained the SVG and the code of the interaction without any of the p5 functions which also worked. I tried to search if other people had a similar issue to mine, but it seems like I'm the first. I am very confused why this happens, does anybody know why? I need both of those functions to do the fundamental things with p5.
  23. Hello Gsap community, i'm trying to create a Website, where when I scroll through it, the Time of the Video which is permanently in the Background is connected to the Scroll. While i'am scrolling and passing certain points in the Video, different HTML Elements should appear / disappear. So for example from Second 2-6 from the video i want to display elements which explain this part of the video and so on. The Elements should not be pinned tho, because the Video itself has a scroll through like effect aswell. I unfortunatly don't have any working prototype.
  24. Hi, Is there any way to target another element for adding class while the trigger elements enters and exits viewport. Like a target prop or something. Or just add animation to another set of images. In the below code I am trying to add "active" class to the target element ".anim-phone-image" but i guess there is no such property 😅. Please help me out useEffect(() => { const scrollTexts = gsap.utils.toArray('.anim-text'); scrollTexts.forEach((item, index) => { tl.current = gsap.timeline({ scrollTrigger: { trigger: item, scrub: true, start: 'top 30%', // start when top of trigger target hits 50% point of viewport end: 'bottom 10%', toggleClass: `active-${index}`, markers: true, target: '.anim-phone-image', }, }); }); }, []);
  25. Hi GSAP Guys, I am trying to get this to work. When you scroll down the number counter activates when section comes in to view, then starts the counting up of the numbers. But this isn't working, I know something is wrong but can't figure it out.
×