CreativeRobot Posted October 27, 2021 Share Posted October 27, 2021 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 More sharing options...
Cassie Posted October 27, 2021 Share Posted October 27, 2021 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. 1 Link to comment Share on other sites More sharing options...
CreativeRobot Posted October 27, 2021 Author Share Posted October 27, 2021 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 More sharing options...
Cassie Posted October 27, 2021 Share Posted October 27, 2021 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 1 Link to comment Share on other sites More sharing options...
CreativeRobot Posted October 27, 2021 Author Share Posted October 27, 2021 @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. Link to comment Share on other sites More sharing options...
Cassie Posted October 27, 2021 Share Posted October 27, 2021 Any sort of code adjustments have potential to mess up templates. Gotta be careful! Good luck with your project. 🥳 1 Link to comment Share on other sites More sharing options...
CreativeRobot Posted October 27, 2021 Author Share Posted October 27, 2021 I agree! Take care and again thank you for your help Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now