Jump to content
GreenSock

CreativeRobot

HELP! HELP! GIF PRELOADER WITH GSAP.

Recommended Posts

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. 

 

See the Pen ExvmJKJ by ren-winther (@ren-winther) on CodePen

Link to comment
Share on other sites

Hi there!

 

This codepen has a lot of console errors - start by clearing those up! It's always a good place to begin when debugging.

Is there a reason you don't just have the gif in the DOM to fade it in and out?

If you can't then I guess the best bet would be to add it to the DOM before your timeline runs and then adding the gif opacity fade to the start and end of the timeline.

 

 

  • Thanks 1
Link to comment
Share on other sites

Hello @Cassie

 

Thanks for your feedback I appreciate it. I wish I could understand code language better haha but my expertise is very green and very low if I have to be honest. Dont know what the DOM is? 

 

The code is a mix of other codes here and there, that I have tried to put together for my website on the website builder squarespace.  I am a brand designer not a back / frontend developer. I´m just trying my best to make it work with gsap. ;) 

 

 

Link to comment
Share on other sites

Oh ok!

 

No worries, everyone starts somewhere. I meant why are you doing this...
 

document.body.insertAdjacentHTML("afterbegin", '<div class="transition-slide"></div>');

(adding HTML in via JS)

 

Instead of having that code directly in the HTML, (the DOM) I guess you can't do that in squarespace?

anyway

There's lots of ways to achieve this but the main parts are 

1) Have something to animate - either by putting the element in the HTML or injecting it with JS
2) Pop it onto your timeline

See the Pen zYdwVqp?editors=0011 by GreenSock (@GreenSock) on CodePen


 

  • Thanks 1
Link to comment
Share on other sites

@Cassie Thank you very much.  🤩 

 

You are a code superhero. It kinda makes more sense for me when you write the code up like you just did compared to the other I have put together.

 

It is a good question actually - I guess it should work, you apply the coding into the head and footer area and it would properly be better for the overall stability in the long run but what I have noticed is, that people tend to target divs and then implement GSAP, jquery and so on. My best guess is that DOM tweaking can *%$# up the predefined templates somehow. I know there is a way to enter the backend but I do not dare to go in there 😅  😂

 

 

 

See the attached images of the code injection area within squarespace if you are interested. 

Screen Shot 2021-10-27 at 16.51.18.png

Screen Shot 2021-10-27 at 16.51.26.png

Link to comment
Share on other sites

Any sort of code adjustments have potential to mess up templates. Gotta be careful! 

Good luck with your project. 🥳

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×