Search the Community
Showing results for tags 'preloader'.
Found 18 results
-
I am using NEXT JS 13 with 'app' dir, within it with the help of loader.tsx and page.tsx I'm trying to create a number % loading animation using gsap, but there is no rendering of data from loading.tsx file and I'm can't able to identify the problem with my code. link to demo file - https://stackblitz.com/edit/stackblitz-starters-wlywtf?embed=1&file=app%2Floading.tsx I want loading animation similar to this. reference - DuallStudio . Creative Digital Studio page.tsx - export default async function Home() { await new Promise((resolve) => setTimeout(resolve, 3000)); return ( <main> <section className="flex justify-start"> <span className="text-7xl relative"> Hello <br /> there <span className="absolute top">👋</span> </span> </section> </main> ); } loading.tsx - // Loading.js 'use client' import { useEffect } from 'react'; import gsap from 'gsap'; const Loading = () => { useEffect(() => { const tl = gsap.timeline({ repeat: -1 }); tl.to('.preloader', { width: '100%', duration: 1, ease: 'power1.inOut', }).to('.preloader', { width: '0%', duration: 1, ease: 'power1.inOut' }); }, []); return ( <div className="fixed flex justify-center items-center w-screen h-screen z-[1000]"> <div className="preloader"></div> </div> ); }; export default Loading;
-
Hey guys, I'm new to GSAP and was wondering if there's an easy solution to start the timeline AFTER all assets/images have been loaded. Maybe even with a circular preloader e.g. Thanks for your help
-
Hi, So I basically have a div which has my Lottie Animation which I have hooked with ScrollTrigger using one of the helper functions as mentioned here. Everything is working fine except I want to add a preloader to my website. I deployed the entire code using jQuery and am firing the preloader on window load but the Lottie animation doesn't seem to follow that. My Lottie file loads after everything has loaded and preloader has been hidden due to window load. What should I do ? I'm stuck. Thanks in advance.
-
Hi and hello . Working on a custom code for a online platform but I can not at all figure out > how to implement a simple GIF preloader via my internal scr link? Is it possible to implement some kind of simple code to my existing code. The GIF preloader needs to load and fade in / out when the page transition start and ends? internal SRC link: <img src="/s/galleri-studio-artwork.gif"></img> Kind regards from Denmark. Thanks to @OSUblake for helping out with my other issue.
-
Hi, I am very new to gsap and trying to make a preloader transition to the page. but, I've never made any transition before not know how to make it. I wanted to achieve the transition achieved in this website. https://adrienlaurent.fr/. and also if i get some advices and some tips on how to make your own custom page transition using gsap would be appreciated ? this pen has the preloader and some images i want to have a preloader transition to the page like the way it is in the website i mentioned above i not know the way i can achieve it
-
¡Hola Sorry in advance for my bad english. I need animation developers advices. Please I begin creative development with react (js not native) and i don't know how websites created preloader with percent animations : https://jasonbradley.co/ https://heycusp.com/ I'm a beginner and i try to use react hooks but I don't know how to create this kind of animation. And above all: how to create the percentage when content is loading. How is it working please ? Thanks to you nice developers
-
See the Pen GSPreloader by GreenSock (@GreenSock) on CodePen. I had some fun creating a simple little preloader animation with spinning dots that animate in/out with a single JS call. This is what we're using on the new GreenSock.com. All it does is: Create a certain number of DIVs (you decide how many) with border-radius:50% to make them circular Offsets their transform-origin to whatever radius you define Rotates each one to disperse them around a big circle Drops them into a wrapper DIV that's fixed-position, centered perfectly in the window with a high z-index Creates a repeating/looping TimelineMax instance for each dot, animating its rotation "-=360" (360 less than whatever it starts at, thus one full rotation around the bigger circle) and then its skew by "+=360" (this is what makes it appear to "flip") Place each dot's TimelineMax into a master TimelineLite instance in a slightly staggered fashion. This TimelineLite serves as the container for the whole animation, making it simple to control as a whole. To animate out, the main TimelineLite gets paused, and a new tween for each dot animates it from wherever it happens to be, off the screen in a cool way (again, slightly staggered). This would be pretty tough or impossible to do with pure CSS. Features Completely customizable - use the config object to define the number of dots, the size of the dots, the radius of the circle, the colors (as many or as few colors as you want), the opacity and border of the background box, etc. Pure JS. Copy one JS function, and make sure you load TweenLite and CSSPlugin (or just TweenMax which has both), and you're good-to-go Automatically centers itself in the window and sets the container's z-index to 200 Call your preloader's active() method to turn it on or off. preloader.active(true) turns it on, preloader.active(false) turns it off, and you can check its status using preloader.active() (no parameter). -
I created this demo which shows a slider with a preloader. The GSAP slider is completely out of sink and doesn't slide on time. How can I load the images and the slider together? It would be nice to have this function working together nicely. Also the fading on the images are a bit glitchy . I might have used to many alphas.
-
Hi all i am wondering if some have time to help me out making this preloader animation i am new to greensock and really stuck, help!
-
Hi All! I'm a newbie and i hope somebody can help me regarding a matter. Here below a short explanation. I'm trying to create a Preloading animation using Gsap. As you can see i have created a little SVG sample, then i have animated It using a timeline (nothing complicate and i hope i did it in the right way): At this point i want something that work in this way: A percentage progress linked with the Timeline. I have tried in many ways but nothing seems to work as i want. I know that the solution require a Javascript code but i don't know how to put Javascript and Gsap together. I hope I was clear, Thanks in advance. Dave
-
Hello everyone! I would like to create a preloader with a plus sign that : - fades in; - the plus sign turns (rotate) clockwise 90 degrees for each 25% downloaded; - after 100%, fades out; Any ideas will be appreciated... Thanks!!! neuhaus3000
-
Hi I'm fairly new here at Greensock. I've checked the examples, contents and forum and I find it really awesome! When I checked on the showcase, I stumbled upon this website http://www.electricenjin.com I just wondered if there's a tutorial or any article on how to create a horizontal preloader used in the site. Thank you very much!
-
Hi, I've just created a preloader with a handful of options(ease and other config options) to play. Just wanted to share this here. Play with it!! Thank you Cheers, Sven.
-
Hi there! I'm trying to use the code for the Circular Preloader... But it seems like I can't make it work. I'm not entirely shure where to actually use the code in my setup. What I'm doing with my js-files are to combine them into one file using gulp. The way I have set it up means that the code for TweenMax is in the one js-file before config-code & preloader class/function. I'm using the code for the preloader in one file that I call preloder.js. In this file I setup the config: var preloader = new GSPreloader({ radius:42, dotSize:15, dotCount:10, colors:["#61AC27","#555","purple","#FF6600"], //have as many or as few colors as you want. boxOpacity:0.2, boxBorder:"1px solid #AAA", animationOffset: 1.8, //jump 1.8 seconds into the animation for a more active part of the spinning initially (just looks a bit better in my opinion) }); After this I have the whole preloader class/function code. Then I have a custom.js file where I in the $(document).ready(function() call preloader.active(true); I keep getting an error in my js-console... "Uncaught TypeError: Cannot read property 'appendChild' of null GSPreloader (anonymous function)" var preloader = new GSPreloader({ The error is regarding this code in the preloader class/function: parent.appendChild(element); I've also tried to in my head paste ALL js-code for the preloader with script tags but keep getting the same error/problem... ALL code means including config-code & preloader.active(true); Does anyone have an idea as to why this is happening? Best, Niklas
-
Hi all, I am very new to loadermax and fairly inexperienced with AS3 so apologise if I have missed or misunderstood some documentation that explains this. I am currently using SWFLoader to load 3 external swfs into a main swf. I have constructed a preloader in this main swf that 'draws' a ring using masking. The ring currently tracks the load progress of the whole queue (see code below) however I want it to track the load progress of Atoms.swf. The ultimate aim is to repeat this for the other array assets. //Load external SWFs into queue LoaderMax.activate([SWFLoader]); var urls:Array = ["Atoms.swf","Compounds.swf","Quiz.swf"]; var queue:LoaderMax = LoaderMax.parse(urls); var swfs:Array = queue.content; queue.load(); queue.addEventListener(ProgressEvent.PROGRESS, onLoading); function onLoading(event:LoaderEvent):void { //set variables to calculate ring rotation var loaded1:Number = event.target.progress; var counter1=(loaded1*100)*3.6; //mask one semi-ring over the other masked1_mc.mask=masking1_mc; masked1_mc.rotation=counter1; if(masked1_mc.rotation<0){ masked1_mc.mask=null } My reasoning tells me that the event.target.progress needs to be changed to track the asset loading however I am unsure what code (if any) would accomplish this. I have considered just hard-coding a ratio of queue progress to swf size for each asset but would really prefer something a bit more dynamic (so I don't need to change it when I update the external swfs in future). I realise that this may not be the best implementation of loadermax however it currently works and I would prefer not to change it unless necessary. Sorry if this seems a bit long winded, I would really appreciate a speedy response for some enlightenment in this matter. Thanks for LoaderMax, the whole of GreenSock and helpful responses.
-
Has anyone used Loadermax to preload a starling project? I have used Loadermax in the past, but seem to be stumped on how to get it working for a starling project. Does anyone have any suggestions or some sample code they could should me. I am using Flash Pro 6, if that makes a difference. Thanks!
-
I'm still getting used to the Javascript world since unfortunately as flash web developer I have to make the gradual shift because of handheld devices. My question is how to create a preloader in Javascript using maybe Greensock plugin. I'm used to something like this in Flash function LoadingImageImage1(event:ProgressEvent) { var percent:Number = Math.round( ((event.bytesLoaded)*100)/(event.bytesTotal) ); ImageLoaderFeedback.scaleX = (percent/100); if( percent == 100) { TweenMax.to(ImageLoader2, 1, {delay:0.8,autoAlpha:0, ease:Cubic.easeOut}); } } Can anybody point me to the right direction of what I need to do. Thanks Cinoklu
-
Hi I'm attempting to replicate the preloader functionality of the demo for LoaderMax, Basically I'm loading multiple images to form a scrolling gallery, with each individual image having its own preloader. I've got a container with the preloader for each image, awaiting the image to load, this is so I can animate that container around whilst the image is loading and the user can see the progress bar in the mean time.. I'm just struggling to get multiple images loading simultaneously to display progress bars at the same time like in the LoaderMax demo.... any advice? var categoryName:String = "portrait"; var maxCons:Number = 2; var numImages:int = 4; var clipArray:Array = []; var imgContainer:MovieClip; var progressBar:MyProgressBar; var queue:LoaderMax = new LoaderMax({maxConnections:maxCons, onProgress:queueProgressHandler, onComplete:queueCompleteHandler, onChildProgress:imageProgressHandler, onChildComplete:imageCompleteHandler }); for (var i:int=0; i<numImages; i++) { queue.append(new ImageLoader("gallery/"+categoryName+"/pictures/" + i + ".jpg", {container:containerMC, x:650, y:0})); imgContainer = new MovieClip(); progressBar = new MyProgressBar(); // Add the preloader to the future image container, then to the array progressBar.name = "progressBar" + i.toString(); imgContainer.addChild(progressBar); imgContainer.name = "imgContainer" + i.toString(); clipArray.push(imgContainer); } queue.load(); function imageProgressHandler(event:LoaderEvent):void { /////// give each loader its own Preloader /////// ////// How to find which loaders are loading to call their respective preloaders? <<--------------------- ////// And set Priority to that loader when button clicked? clipArray(/* select Loader */).progressBar.scaleX = event.target.progress; } function handleClick(event:MouseEvent):void { // Set loading priority to clip } function imageCompleteHandler(event:LoaderEvent):void { /// add loader to container, remove the preloader /// remove the loader /// etc... } /// Other functions for loaderMax listeners Thanks for your time
