Search the Community

please some body help me I have an book flipping animation everything is working fine but the problem is i want to add gsap scrollTrigger in it and i can't do it my self i want that when this book section appear section stop pin : true type thing i guess and the pages flip on scroll

Hi, I'm looking to find an elegant and simple way to preview html5 banners for clients. The situation is that we have Project Managers running multiple projects each with different developers, and they need a common way to show the client work-in-progress, ideally with our company brand. Instead, so far I've seen HTML files either hand coded our output to HTML using Swiffy, which each produce a full html file. I am looking for something simple that a PM can get from a developer and either drop-in or upload to a tool like Wordpress, so they can easily create a preview page with multiple banners (or links to banners) in a consistent manner. Anyone out there have experience in this area? Having PMs hand code HTML pages, or using more advanced features of WP is....less than ideal. Appreciate the insight!

I've reached my witts end here, I have been trying to solve this issue for the past hour or so but with no avail. I created an animation with GSAP that creates an illusion that you are zooming into a planet, then the planet will disappear and a random image of a lake with large rocks will appear and two text boxes appear, one of them with a button. Once you click on the button, the image of the lake and the two text boxes will disappear and another image of the night sky will take its place. Everything works well up to this point, however, when I resize the viewport, the image of the night sky disappears and the image of the large rocks appears again when it shouldn't. I've included the CODEPEN for this but I can't recreate the bug/error. gsap.timeline({ scrollTrigger: { trigger: ".earth_container", start: "-20% 0%", markers: false } }) .to(".earth_planet", { width: "+=2500", height:"+=2500", duration: 3 }) .set(".earth_container", { backgroundImage: "url('https://i.postimg.cc/Dy9ryPpB/earth-forest.jpg')", backgroundSize: "cover" }) .to(".earth_planet", { opacity: 0 }) .from(".text_info_box_earth_one", { opacity: 0 }) .from(".text_info_box_earth_two", { opacity: 0 }); the timeline above executes automatically and the code below is only executed when the user clicks on the button "Night Time". As i stated before, everything works fine to this point, but once i resize the window AFTER i click on the "Night Time" button, however, the backgroundImage of the ".earth_container" reverts back to the image of the lake, when it shouldn't... why do you think this is happening? function change_to_night_earth() { let newHTML = "The night sky is just as beautiful " + "as the the day time sky. Millions of stars in every " + "corner of the sky. There may be less light, but there isn't " + "less beauty at this time of the planet"; let new_HTML = "Click the button below if you want to return to " + "the day time of earth..." + "<br><br>" + "<button type='button' class='btn'> Day Time </button>"; gsap.timeline() .to(".text_info_box_earth_one", { opacity: 0 }) .to(".text_info_box_earth_two", { opacity: 0 }) .to(".earth_container", { opacity: 0 }) .set(".text_info_box_earth_one", { innerHTML: newHTML, attr: {class: "text_containers_white text_info_box_earth_one transitioning_fast"} }) .set(".text_info_box_earth_two", { innerHTML: new_HTML, attr: {class: "text_containers_white text_info_box_earth_two transitioning_fast"} }) //-----this is propbably where the error happens---------------------------------------------- .set(".earth_container", { backgroundImage: "url('https://i.postimg.cc/x8km9XKw/earth-night.jpg')", }) //---------------------------------------------------------------------------------------------- .to(".earth_container", { opacity: 1 }) .to(".text_info_box_earth_one", { opacity: 1 }) .to(".text_info_box_earth_two", { opacity: 1 }) }

Hello everyone, I would like to develop this kind of animation for my background. Anybody suggest me about this how can I develop this? Also how can I add liquid hover effect on images. https://s.muz.li/NzNjY2YzNGRi Thanks

Hello I'm trying to get a grabbing icon while the user grabs and holds the Watering Can (Please see update). It would also be nice if the Watering Can would rotate down when hovering over the grass. (Done, please see update) Would it be difficult to only use javascript? (I tried already a lot of things, also by attaching an image to the mouse and let it follow it. The cursor always get's standard...) Would it be easier to use GSAP? (Setting it up, implenting it in my work? ) Thank you for any advice, Kind regards, Claude UPDATE: The codepen and the code below was updated but the Grass still doesn't grow. Any idea why? UPDATE 2: The grass grows The cursor still doesn't change to "grabbing" while grabbing the can. UPDATE 3: It seems to be a browser compatibility issue. Removed all the extra cursor code and it work fine in Firefox! CodePen: https://codepen.io/Shaman1975/pen/zYoEqzr HTML (Latest Update) <div class="can"> <svg width="15" height="100vh" fill="none" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="droplets" width="15" height="21" viewBox="0 0 181 208" fill="url(#pattern)" patternUnits="userSpaceOnUse"> <path d="M94 160.7C94 186.65 72.97 207.68 47.02 207.68C21.07 207.68 0.0400085 186.65 0.0400085 160.7C0.0400085 134.75 28.04 116.44 47.02 84C61.82 112 94 134.76 94 160.7Z" fill="#00A3FF" /> <path d="M181 76.7C181 102.65 159.97 123.68 134.02 123.68C108.07 123.68 87.04 102.65 87.04 76.7C87.04 50.75 115.04 32.44 134.02 0C148.82 28 181 50.76 181 76.7Z" fill="#00A3FF" /> </pattern> </defs> <rect width="100%" height="100%" fill="url(#droplets)" /> </svg> <img id="gb03" class="gamebtn" alt="Watering Can" src="https://ga.chi.lu/wp-content/uploads/2021/02/watering-can.png" width="80" height="80"> </div> <img id="grass" class="grasspng" alt="Grass" src="https://ga.chi.lu/wp-content/uploads/2021/02/grass.png"> </img> CSS (Latest Update) * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { padding: 0; margin: 0; height: 100%; -ms-overflow-style: none; scrollbar-width: none; } body::-webkit-scrollbar, html::-webkit-scrollbar { display: none; } .can { position: relative; } #gb03 { position: absolute; } #droplets { visibility: hidden; } svg { top: 30px; left: -10px; position: absolute; z-index: 0; } .gamebtn { z-index: 2; width: 50px; height: 50px; margin-bottom: 5px; } .gamebtn:hover { filter: brightness(130%) drop-shadow(0 2px 5px black); } #grass { position: fixed; bottom: -40px; z-index: 7; transition: all 2s; transition-timing-function: linear; } JS (Latest Update) window.addEventListener("load", function () { console.clear(); tl = gsap .timeline({ paused: true }) .to(".gamebtn", { scale: 1.5, rotate: -25, duration: 0.25 }); var cur = 0; Draggable.create(".can", { onDragStart() { tl.timeScale(1).play(); gsap.to("#droplets", { repeat: -1, duration: 0.1, autoAlpha: 1, ease: "none", attr: { y: () => "+=" + 21 } }); }, onDragEnd(event) { var bottom = gsap.getProperty("#grass", "bottom"); if (bottom != "0") { gsap.to("#grass", { duration: 0.3, bottom: "+=10" }); } else { gsap.set("#grass", { bottom: 0 }); } tl.timeScale(2).reverse(); gsap.killTweensOf("#droplets"); gsap.set("#droplets", { autoAlpha: 0 }); } }); });

Hi everyone. I try to do animation for svg elements. Here's what I did - jsfiddle The problem is that svg photos can be different (as small as 100-500 lines of code, or large as thousands of lines). For what we have now, we need to have svg directly in the DOM. And if the svg file consists of several thousand lines of code, the animation will load the system and will not work smoothly (jsfiddle) So I think we need svg, turn it into canvas and then work with it. If they were ordinary primitive figures (circle, triangle, square) and they would meet once on the page, I could draw them in canvas. But the problem is that these can be different forms of drawing. I thought it would be great if we could svg load a certain mask and display circles in it, which would be animated following mouse over. Such a mask could be made as a single path(mask). However, frankly speaking, I don't know how to do this or if it's possible to do it. I would be very grateful for any help and examples. Thank you.

Hi everyone, I just learned to make animation website and join in greensock. I'm trying to learn to create a website using the exact same background effect as the one implemented on this website, http://thegigi.it/ in this website using a plus sign in the background and follow the direction of the mouse, I've asked in some forums and finally found the answer using tweenmax. Please guide me how can i achieve the same background effect? thankyou.

This isn't a GSAP question, but I was wondering if you guys had gotten this from a media agency before. Four of the six ads we sent over got kicked back from their QA (I'm assuming they're using DCM, since they're standard banners), and they reason they gave was: "One of your HTML5 assets is invalid and cannot be analyzed. Please correct any malformed assets and try again." Have you guys seen this before? These ads are all based on the same code, so I don't understand why some of them passed and some failed QA. I've tried a bunch of stuff, like un-minifying the javascript, deleting comments that reference unused assets, but I really feel like I'm shooting in the dark here. I would have thought it was an issue with nested assets, or too many assets, but that doesn't seem to be the case. We reached out to the ad ops guys for more clarification, but the media companies seem to have the sense of urgency of a slug, and I really want to get this resolved as quickly as possible. Help!

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/

Hi. I'm looking for feedback on my new project, here is a little background on how it became. My clients sometimes send me an already working preview for the animation they have. They either want a creative update or a different size banner. To match the timing as close as possible, I usually record the animation as mp4 and then using a video player with pause/play extract necessary time keys. To simplify this, I created a tool that records the video for me. Just pass the URL get back the mp4 video. I thought it could also be used to export the animation (html5, index.html, zip package) as an mp4 and then used as a video advertisement on FB or Instagram,... https://urlrec.com/ Any feedback on your workflow and if this is something you would use would be excellent.

hi guys, i want to achieve https://dexternavy.com like hover effect. i have tried it using this cdn 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js' but it not work as i thought and i am stuck here. Any help would be greatly appreciated.

Hi, How can i create this sort of effect with gsap https://perficientdigitallabs.com/work Thanks

Hey all, This is my first time posting here, so let me know if i've given too much / too little detail! I'm having an issue with some css on safari, essentially I have a series of elements, positioned along the Z-axis with transform: translateZ, in order to achieve a parallax effect, however, I would also like to apply a mix blend mode to some of the elements on the page. This works fine on Chrome and FireFox, and displays as expected, however it completely breaks the site on Safari with the content appearing extremely zoomed in, i'm not sure what to try to rectify the issue, i've tried attaching prefixes to everything however this doesn't seem to make any difference, I have attached an image bellow of what the page looks like when viewed in Safari. Any help would be really appreciated thanks!

I'm attempting to code an ad that uses an html form to append search parameters to my destination url. I am also trying to use a clickTag so that when the user clicks on the search button, a click is registered. I'm attempting to serve this ad in Google Adwords and another ad server called Basis DSP. Both have similar specifications on using a clickTag variable. So far, I have been unsuccessful in getting a click to register in Basis DSP. When I uploaded to the HTML5 Validator for Adwords, it passed but suggested I use the Google hosted ExitApi. Would the type of ad I'm describing be possible in the Adwords platform or would it be classified as Rich Media and need to be served in Display & Video 360? I have multiple variations of my ad where the search functionality is working but I'm still unable to get the clickTag to get tracked. Below is one code example: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="ad.size" content="width=300,height=250"> <meta name="click.through" content="ad" /> <link rel="stylesheet" href="Talbots_JobSearch_300x250.css"/> <title>Tablots | Search Jobs - 300x250</title> <script type="text/javascript"> function clickTag(){ document.getElementById("jobSearch").submit(); } window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true); </script> </head> <body> <div id="ad" class="wrap"> <form id="jobSearch" action="https://jobs.talbots.com/index.gp" method="get" target="_blank"> <input id="method" type="hidden" name="method" value="cappportal.showPortalSearch"> <input id="sysLayoutID" type="hidden" name="sysLayoutID" value="123"> <input id="utm_source" type="hidden" name="utm_source" value="hc-bannerads"> <label for="keyword">Keyword:</label> <input id="keyword" type="text" name="keyword"> <input type="button" onclick="clickTag()" value="Search"> </form> </div> </body> </html> Looking for any guidance on using this type of search functionality in an ad and whether it's possible in Google Adwords. Any help would be much appreciated!

I’m looking for talented developers with high animation skills. I work for an agency specialized in developments of campaigns for big brands. These are good examples of the quality we are looking for: https://bannerboy.com/brain/?post=converse-chuck2-knit-320x480 https://bannerboy.com/brain/?post=google-gsp16-bike-300x250 https://bannerboy.com/brain/?post=duracell-gamer-halo-300x250 For more information please send me an email here with your portfolio. thanks!

Just thought I'd share some banner examples from my day-job https://www.andyfoulds.co.uk/banners/html5_banners/ Reckon every one has GSAP to thank to some extent! Andy___F

HI everyone! I am being active here! I made a simple game using GSAP I know it is possible but it is really hard to code a game using GSAP alone.. can you guys which part of gsap I am going to use if I want to make an awesome game using GSAP! Pen Link: http://codepen.io/Waren_Gonzaga/pen/dMpjMy Thanks heroes!

With the eventual phasing out of Flash on Chrome and Firefox coming sooner rather than later, I've realized that I need to prioritize the migration of my site's Flash files to HTML5. My partner and I made use of the alpha channel present in SWF files, which allowed us to apply customized backgrounds behind FLVs (allowing our users to enjoy a great interactive experience in our SWFs). We'd like to continue using Greensock products to allow us to more easily present these interactive elements to our users (as we currently use the Actionscript library of GSAP to achieve our goals). My main question at this point is whether there's a GSAP or related Greensock product that will allow us to achieve background transparency when working to migrate our site's more interactive elements from Flash to HTML5. The transparency/alpha channel is a hard requirement for our site needs in terms of what to migrate to. Thank you in advance for any help anyone can offer on this question.

Hello everyone! I'm trying to make a responsive website utilising svg animations, however I noticed, that when using drawSVG tweens, the length of a path gets only calculated once, during the initialization of a tween. My question: Is there a way to trigger path length recalculations during the drawSVG tween without stoping/restarting it. Attached to this thread is a codepen illustrating the problem. Top path is what it's supposed to look like (yellow path hitting the red dot on extremes), and lower path shows what I'm getting. Thank you in advance

Hi there, I had a thought that it would be cool for a banner to only start playing when the ad comes into the users viewport. So that if the ad isn't in the users view it doesn't play while they're not watching, if the ad is positioned further down a page for example. What's the best way to achieve this and is this something that is permitted to do on Google DoubleClick or Google Display Network? Thanks.

Hi! Does anyone use Greensock in Desktop app? (Haxe, React, Flex...)? I'm using it in AS3 / Adobe Air. But because of the non-update of GreenSock in AS3, I'm thinking to port my App to Haxe to use the GreenSock HTML5/JS version, but I don't know how much it will be possible or fluid like the GreenSock AS3 version. The GreenSock HTML5 seems to be very good in websites, but using it in Desktop App Chromium (Haxe, ReactJS, Flex...). It is so good like AS3 native version? Thanks a lot.

Hi Guys, my Name is Oliver. I am the developer of anivendo. A fast, modern and easy to use HTML5 Banner-Animation-App for Windows (Mac-Version will follow) which uses TWEENMAX. · No Coding Experience required! · NO COMPLICATED TIMELINE! anivendo animates your Banner Creatives very much faster than traditional HTML5 Animation Tools like Google Webdesigner, Adobe Flash, Adobe Animate CC, Adobe Edge Animate, etc… Why don’t you take a Look. We are currently searching for alpha-Tester! https://anivendo.com/ Update (03-23-2018): anivendo is now fully documented! https://anivendo.com/docs/ Questions, Bug Report and Improvement Suggestions can be made via anivendo Community Forum https://anivendo.com/community/ _ Cheers Oliver

I am trying to use GSAP to animate a native HTML5 progress bar showing the progress of a timeline. See the attached pen. The first example uses tl.progress()*100 to get to the value of 100. The value itself is being updated (see the #progress1_progress div), but it is not updating the progress element itself. The second example with the value hard-coded of 100 in works fine. It seems this should work. Any ideas why it is not? Thanks.

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.

Hi, I'm new to GSAP and I'm trying to find a way to create an interactive map using a JPG image as the basemap and canvas and GSAP for the animation. I came across several examples on the GSAP website and a live project online that looks exactly like what I'm intending: http://rainforest.arkivert.no/#kart Can you tell me how is this done, or if there are any documentation/tutorial/workshop materials that I can go through. Please advice. Thanks in advance, Hagop