Search the Community
Showing results for tags 'effect'.
Found 18 results
-
Greetings everyone, I have recently started to work as a Shopify Developer and I have a task to tackle. The developer before me used ScrollTrigger to animate the Home page. It would display one div (slide) that would cover the full size, and when scrolling, the next div coming from the bottom would overlap the existing one, continuing the scroll this animation would repeat until there were no more slides left. Now the client requested that I have this same animation but in reverse, when scrolling, slides would appear from the top and overlap the existing one. Is this possible with this current JS code, or do I need to make this from scratch? I've managed to find a Post here that has CodePen that shows what is my current animation.
-
I'm following some of the tutorials and modifying them my way. I found that the registered effect only works once and not every time the mouse enters. here is my code gsap.registerEffect({ name: "fade", defaults: {duration: 2}, effect: (targets, config) => { return gsap.to(targets, {duration: config.duration, opacity: 0}); } }); gsap.registerEffect({ name: "rot", defaults: {duration: 2}, effect: (targets, config) => { return gsap.to(targets, {duration: config.duration, x: config.x, rotate: 180}); } }); var node; function WinLoad() { node = document.getElementById('t1'); node.innerHTML='Found you'; } window.onload = WinLoad; document.querySelectorAll(".box") .forEach(function(x) { x.addEventListener("mouseenter", function() { if (node){ node.innerHTML = x.className; if (x.classList.contains('green')){ gsap.effects.fade(x); } else { gsap.effects.rot(x, { x: 0 }); } } }); });
-
Hello, I've seen this effect on few websites -> cursor has a transparent radius around itself, that when it hovers over a text, the part of text that is "inside" the radius loses it's fill color and only outline remains. I am a somewhat of a beginner, and I am very curious how this works because I'd love to implement it myself. If there is someone that could atleast point me in right direction, to help me figure this out I'd be very thankful. I've also found codepen that is kinda similiar but the principle is a bit different, to my understanding it can only be used on a flat color background, but on the websites that are linked below, this effect is used with picture/photos as background. Here are some websites that are utilizing this effect: https://maxilla.jp/ https://www.alexthery.com/ -
Hi, Right now I am trying to change the conversation images on scroll down in the same position with smooth effects. I don't know how I can make this animation very smooth so that the User can read all the conversations very effectively. And On scroll up conversation image animation starts from first. - I want to change the image in the same position with a smooth effect on scroll down. - Image should be changed without any blink. - sometimes when scrolling down images got invisible on scroll. It should be fadeout first image and fade in the next image in the same position with smooth effect. I don't know but how could I achieve this effect? Does anyone know?
-
It's posible to wrap multiple tweens as an effect, no just one? For example: gsap.registerEffect({ name: 'decodeWord', effect: (targets, config) => { gsap.set(targets, { color: 'white', textShadow: `0 0 0` }); gsap.to(targets, { duration: 1, opacity: 1, scrambleText: { text: config.newText, chars:'lowerCase', revealDelay: 1, tweenLength:false }, }) return gsap }, defaults: {}, //defaults get applied to any "config" object passed to the effect extendTimeline: true, //now you can call the effect directly on any GSAP timeline to have the result immediately inserted in the position you define (default is sequenced at the end) })
-
I was wondering how does this kind of white wave from this site possibly made by GSAP? Is there any additional plugin necessary? I took so many times investigating this site. Hope I find the answer here. Thanks https://krotravelengineering.jp/
-
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!
-
Hi Hero, I need to create a mouseover effect on a little button. The mouseover function will start at the end of the timeline. Here is the original mouseover effect. https://codepen.io/mikeK/pen/Nvdvry Many thanks. -
Hey everyone, i am new to this community and to the tools of greensock. I would love to create something like this "fake 3D programmed" icon which is based on a png file. Does anyone know which of the greensocks technologies I need? This is the website where I found this amazing effect. https://loveiko.com Thanks! Hope to hear from you. Anna
-
Hi guys! I'm new and I'm currently watching the intro videos and while I'm at it, I just want to drop a question. In http://roninamsterdam.com after the preloader, there's a text "Ronin" being animated letter by letter. When it's done animating the word, it scales/zooms in to letter R to the size of your screen, and the white fill becomes transparent to show the image inside/behind the letter R. Can it be done with GSAP?
-
Hello... I'm new to Green Sock and have some difficulties in a project. I found an interesting example, which i want to insert in a website that i am working on. The example is html and css and i want to make it animate with a tween or timeline. Can someone help me? Thank you in advance. I've put the codepen example and a file with whole code. Can you help to make the animation in example to run in reverse , i would like it to start with the parts of the image scattered and in the end combine them all together to the final image. Sorry if i didn't make my self clear. Code.txt
-
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
-
Hi I create TlimeLineMax image gallery animation. refer below code. "tl.add(TweenLite.to(img1, 1, {delay:1, css: { 'filter': 'grayscale(0%)','-webkit-filter': 'grayscale(0%)' },ease:Linear.easeNone}));" animation was work perfectly. but grayscale is too fast. how can i slow this grayscale aniamtion. Thank you.
-
Hi guys, today i was trying to reproduce a kind of fountain effect made of div with the following concept: Create a javascript array Push a div into the array Initialize its position with css wherever you want Move the dive like a water spurt Repeat with setInterval Well as you can see it's quietly easy, not that complicated but i was wondering how can i realize the fountain effect? well i mean, which kind of function do i have to use to give my animation this effect? Here's an example of what i'm trying to reproduce. http://cssdeck.com/labs/html5-canvas-fountain-exploding-particles-with-gravity Note: the previous example is realized using a canvas, i'd like to reproduce it without canvas, only using divs, jquery and the TweenLite library. TL DR: Which is the function i should use to reproduce something like that: http://cssdeck.com/labs/html5-canvas-fountain-exploding-particles-with-gravity using the TweenLite library?
-
Hi and merry xmas to all ! Is GSAP/JS able to render a flash effect transition in a slideshow. A kind of lightening flash bulb of 50's cameras. Hope I am clear enough and thx for your help. Eric
-
Hello there, As a beginner I'm i went into an issue early and I'm still unable to solve it. Maybe can you help me with it. I'm trying to achieve a card flip effect with my navigation bar, here's a small example of what I try to achieve but I'm unable to make this working. It seems to be a z-index related issue. I really hope you can help me achieving this effect. Kind regards. EDIT /// I tried at one point to achieve this effect with 2 menu div with all my buttons one over the second and it was working fine, but I needed to animate both object directly at the same time, which caused a lot of complicated handling of the animation.
-
Hi there, I'm animating a few thumbnails for a website, you can check out a quick version i adapted for codepen, so you can see what i'm trying to archive. http://codepen.io/anon/pen/ABvqm What i'd like to add to this, would be an effect on the other thumbnails apart from the one that the user is hovering. For instance, you rollOver on the thumbnail 1, the thumbnail 1 gets its rollover animation alongside with the other fading out for example. I put my animation inside this function, so i'm not sure how to target the other elements. $(".thumb a").each(function(index, element){} Cheers, Thales
-
Hello, can anybody help me with one my idea? I use opencart shop and i add shadows to my boxes. I want to add pulse multicolor effect to the shadows. Ca anybody help me with this?
