Search the Community

Hello Guys, I want to know to get this effect. Many websites have these. When we hover on a piece of text, images pop-up and when we move away from text, they disapper. Well, the major drawback for me is that I don't know the javascript at all! But I'm great at html&css. I just want a simple effect, image pop-up and move along as we move the cursor on text. I'm sharing the websites which have these effects. I'm including a codepen which has this effect but the problem is, when implement that javascript into my website, it has a part, this on const image = document.querySelector('img') This select all the img tag and I don't even why it has an empty img tag in the beginnning of html. It would be great, if you can help me in any way. https://www.craig-reynolds.com/ https://normal.studio/en/ Thanks & Have a great day!

Hello, I have a problem with ScrollTrigger. I want to achieve a similar effect to what you see on this page: Julian Fella in the section where the text "I HELPED COMPANIES GENERATE" appears. Currently, my container is pinned at the bottom, and the animation starts too early. I’m unsure how to delay it. Could you help me with this issue?

Hi everyone! I'm working on a landing page and I need to create a pre-loader that uses my handwritten logo as an SVG. Desired effect: The desired effect is a Stroke Reveal, implemented with GSAP3. How can I achieve this effect? Logo positioning: After loading, the logo/preloader should be positioned centrally on the navbar. Request for help: To achieve this project, I would need your help. What should I study? Best practices? What resources and tutorials do you recommend to learn more about?: Creating pre-loaders Stroke Reveal effect with GSAP3 Dynamic positioning of SVG elements What can I get inspiration from? Do you have any examples of websites or projects that use similar effects? Conclusion: Thank you in advance for your support! Additional information: I'm using GSAP3 My logo is a handwritten SVG The landing page is developed in HTML, CSS and JavaScript Thank you very much for your help!

Hello guys. Attached code pen. I am new to GSAP and you can see the animation its basically at a background on a website I want to start showing this on my scroll trigger with my scrub I am a little new to gsap cannot do it can you guys please check it. Attaching the SVG too if you want to do it. The gaps that are coming has elements between them and it will come like this in the attached screen shot. Attaching the svg too. Please make it happen for me. Group 35.svg

I have an Image reveal while hovering over a text, what I want is something like on this site https://dennissnellenberg.com/ on Recent work section

It is kind of what I want but due to position absolute I cannot find a way to add multiple scroll trigger and get an animation which is kind of Scroll Animation demo 's story section which reveal stories from underneath.

I created a simple vertical scrolling page with different sections. I would like to display the title for each section with a fixed position when the section is in the viewport. I have an issue in the first section (orange). The position of the title is broken. I'm not sure but perhaps it's related to the HTML element .pin-spacer. I'm new in GSAP and not really sure that my code is ok with what I'm trying to achieve. Any help would much appreciated, thanks.

Hi, I'm having a difficult time with this animation. I have a logo which is going to animate from the bottom then the letters of the logo are going to be reveal from right to left at the same time that it push the logo so everything stays centered. I have and example but it looks like the animation is starting from the center, and not from right to left. I tried to use a background image instead of the SVG and seems to work fine, the issue is that later on I need to change the logo color, so using background image is not an option. Any help would be appreciated. Here is an example of the animation I'm trying to do Screen Recording 2022-07-05 at 15.20.17.mov

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

Hello everyone, I'm facing problem in creating this effect in horizontal scroll. https://codepen.io/eighthday/pen/MKqBjX I want to create this same effect for my page reveal but I want my sections to scroll horizontally and then my whole website will be vertical. I tried by changing the "top" with "left" in js but it didn't work as expected. The problem might be in my approach with horizontal scroll as xPercent is transforming whole section and I can't fix the position of start logo. This is what I did. https://codepen.io/aniketbamotra/pen/wvJrNjr PS. I'm new to web development and this is my first time using gsap so help me with this. Thanks in advance

Hi! Thank you so much for this incredibly valuable forum. I've learned a lot lurking already. I am having trouble animating an alternating entrance point based on class name. In my example all 3 images "reveal" from left to right, but I'd like them to alternate so the images ON the right reveal from the right. Each block has a class of either "reveal-image-left" or "reveal-image-right" that could be leveraged instead if the "reveal-image" selector that's being used across all 3 images now. (The HTML is identical for each block with the alternating positioning done with Flexbox) I cannot for the life of me figure this out and I'm not fluent enough in GSAP/Js to get this over the finish line. Many thanks for your help!

Hi! I'm using the plugin SplitTextJs to create an animation reveal to my titles (you can how I'm doing it in the Codepen). I'm doing this animation on many elements and I want to trigger the animation when the element is in the viewport. With some research I saw that I need to do some loop and a lot of people are doing that with scrollmagic. I was wondering if it's possible to do it without scroll magic. The reason is that I have already many script loaded and I want to have the less script possible to load especially if I'm using it for little things. Thank you

Hey guys, I want to add On scroll image revealing animation on my website. Check out the link below to see the image revealing animation which I want to add in my website but I can’t seem to find any helpful example or library on the internet so I could do it myself. It would be great if you guys could help me to do this animations with GSAP because i'm new to GSAP. Here is the Link: http://renvoye.com/case-mixpanel Best Regards, Umer Zaman

For some clarification: Sorry didnt translite the id's to english. rood1 = circle2 rood2= circle2 lijn1 = the line i want to animate and reveal the part slowly.

Hey guys, i was lookin on the forum and on the internet to finds something about a show/reveal text animation. I want to draw a line in html and out of that line the text is revealed. almost like you lift a curtain and the text is revealed. Looks very simulair like this. i tried to wrap a text element inside of a div with an overflow and then with gsap lift the div wich will reveal the text behind it. Didnt get that to work unfortunately since the elements both move when i try it. Any suggestions on how to achieve this?

Hi all - this is my first post on GSAP, hope you guys can help me. Love GSAP by the way, it is awesome. I'm using Reveal EventListeners (https://github.com/hakimel/reveal.js#slide-states) to trigger timeline sequences. These sequences are a combination of staggerFrom and from, and I use DrawSVG with Yoyo sometimes too. I found this example that pretty much matches my setup: http://stackoverflow.com/questions/23936987/how-to-trigger-a-gsap-function-when-a-slide-comes-active-with-reveal-js Here is one of the sequences, they all follow the same structure: Reveal.addEventListener('slideName', function () { tl = new TimelineMax(); tl.staggerFrom("#aSlideElement", 9, { rotationY: 1080, scale: 15, y:"-1900px", x:"600px", ease: Power4.easeInOutQuint }, 0.7) .from("#anotherSlideElement", 9, { onUpdate: cssFilterTween, onUpdateParams: ["{self}", "blur", 100, 1], ease: Power4.easeInOutQuint }, 0) .from("#yetAnotherSlideElement", 10, { fill:"#0f0c31", ease: Power4.easeInOutQuint }, 5) .from("#soManySlideElements", 4, { autoAlpha: 0, ease: Power4.easeInOutQuint }, 10) }, false); Reveal is basically a presentation slides framework and each slide has its own sequence that is triggered using an eventlistener. My problem is these sequences do not completely reset the timeline and all the elements when you 'leave' a slide. This means if you go back and forth between slides, the elements are sometimes misplaced, finish in the wrong position or get muddled start/finish timings. Eventually they just slow to a halt and do nothing. I have to refresh the page to get it back to where things started. I've tried restart(), clear(), remove(), kill(), pause(0), etc. I've tried placing 'overwrite: 3' amongst each tween. I've tried placing a single global timeline above the eventlisteners, rather than create a new timeline for each slide. I think it may be something to do with the volatile triggering that occurs when quickly going back and forth between slides, but I assume GSAP should be pretty quick at resetting? Any help would be awesome, this is really puzzling me. Thanks, James