GSAP no longer works with Sitejet

[Patrick_Luescher]

To be honest, the animations that Sitejet offers are a bit boring and inflexible.

So I am very glad that I discovered the possibility to use GSAP. The integration worked wonderfully and didn’t cause any problems.

But since an update of Sitejet about one or two months ago, there are now unfortunately problems.

At the first moment GSAP can be implemented. But the next time I open the website builder again, the animation doesn’t work anymore.

I noticed that the objects which are addressed with GSAP via a CSS class lose the properties “ID & Klassen”, “Animation”, “Zeiten” and “Sonstige” from this moment on.

I would be very grateful if you could take care of this problem and make the possibility to use GSAP possible again.

Thank you!

On the screenshot above you can see that the mentioned properties are missing.

[Lucian_Dinu]

Hi!
Probably the GSAP animation is adding or removing your classes (or properties) while it animates (while the JS code is executed). Because you are running the animation inside the CMS Editor(in edit mode), the new properties are pushed back to the elements (and hitting save will save the elements with the new “state”).
Just make sure that what your (JS) animations are not running is edit mode … you can do this by adding “body:not(.edit)” to your selectors (triggers that you are using for animation)

I hope it make sense.

[Patrick_Luescher]

@Lucian_Dinu

body:not(.edit)

Hello Lucian

Thank you very much for your answer.

Yes, that really makes sense! That could well be the problem. In the past, the GSAP animations were not displayed in the builder at all. But since some time the animations are visible in the builder too. So most likely the problem is related to that.

But now I am not sure how the code should look like. Can you maybe help me?

The class that is removed and added again is called “.fade-in-logo”. Can you show me with this example how the code should look like in connection with the “body:not(.edit)”?

Thanks a lot!

[Lucian_Dinu]

Hi!
You should prepend the body:not(.edit) to your element.

Something like this:
From: #my_element_to_be_animated
To: body:not(.edit) #my_element_to_be_animated

#my_element_to_be_animated - this is the element where you will add/remove the .fade-in-logo

If you can post(message) the code snipped, I can change it.

P.S. I think that in your case you are just adding the .fade-in-logo to an element through the SJ UI. I think you need to change the JavaScript part. with body:not(.edit) .fade-in-logo instead of .fade-in-logo

[Patrick_Luescher]

Thank you very much Lucian!

It looks like this is really working.

I put “body:not(.edit) .fade-in-logo” instead of “.fade-in-logo” in the JS code and now it works. The animation is no longer running in the builder, but when you go to the website, the animation works.

I will do some more tests. But I think this is the solution!

[Jean_Pierre_Michael]

Oh, so we can’t have both ?
I would love sitejet to imtegrate gsap as a scroll/load animation property. They are so smooth and great. #featurerequest

[Jean_Pierre_Michael]

And is there a how-to for gsap in sitejet? @Lucian_Dinu could you make a basic tutorial for this? That would be awesome !

[Patrick_Luescher]

Hello Jean Pierre

I can make you an example how the integration of GSAP looks like in my website:

1. You have to integrate the needed scripts for GSAP in the “HTML” tab.
   

   

2. Create a class for the element you want to animate. In my case “.fade-in-logo”.
   

   

3. Integrate the code for GSAP in the Tap “Javascript”. You can find a detailed description on the GSAP website. I discussed above, it is important that you put “body:not(.edit)” in front of the class name “.fade-in-logo”, so that the animation is not executed in the builder but only when visiting the website.
   

   

I hope this little tutorial helps you.

[Jean_Pierre_Michael]

Wouah ! Thanks a lot @Patrick_Luescher. So helpful. This should be pinned. Is there a way to have the code in a snippet instead of the photos ?
I would love this ( the base of Gsap and the base of ours settings (fonts, colors etc. to be saved for every new project. I suppose I would have to create a template to work from scratch each time. But then I can’t use the templates. Could we separate this?

[Patrick_Luescher]

Hello Jean Pierre

Below I will attach you the code snippets:

<!-- Verknüfung zu Script für Gsap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js"></script>

/* Fade In Animation für Header mit GSAP */
// Initialisierung
gsap.registerPlugin(ScrollTrigger);

// Klasse für das animierte Element
gsap.from("body:not(.edit) .fade-in-logo", {
  scrollTrigger: {
    // Trigger für das Auslösen der Animation
    trigger: ".logo-section",
    // Erstes Mal erscheint, erstes Mal verschwindet, weiteres Mal erscheint, weiteres Mal verschwindet
    toggleActions: "play reverse play reverse",
    // Markierungen zu Testzwecken
    // markers: true
  },
  // Werte für Animation
  y: -125,
  opacity: 0,
  duration: 1,
  delay: 0.5,
});

Some more information:

Trigger: as soon as the element with the trigger class appears on the screen the animation is executed. This can also be the same class as the animation itself.
Markers: If you set the markers to true, you will get visual markers for the animation. This is for development purposes only.

Keep in mind that GSAP can do much more than this. All further information can be found on the GSAP website.

[Jean_Pierre_Michael]

Perfekt ! Danke sehr Patrick,
I appreciate. I will try to play with it.

[Tobias_Abendroth]

Hello, I have the same problem. At the first moment the animation works fine. But after I edit a text or something else, the animation doesn’t work anymore. I tried to fix the problem with the solution mentioned before, but it didn’t work.
Can someone help me to solve my problem?