Question about upcoming 6.6 release and working with GSAP

Beta
#1

Hello Charlie,

It has been a while hope all is fine over there.

I have a question about the upcoming version, what I understand this new version will output straight HTML. Will this also influence for example when using with GSAP?

I’m working on a new project and am using Pro, unfortunately I have noticed before and notice again now that when using GSAP and Pro, I’m getting a different outcome/behavior as when creating the same elements and animations with Codepen.

Even when I use a Raw element and literally pasting the same HTML in this element the behavior is not the same as in Codepen.

Ofcourse it can be that I’m doing things wrong but as far as I’m aware I’m not.

Have a look at the following 2 links to see the differences in behavior:


https://camping-lestrexons.com/devlesstage/animated-web2-2-2/

What I have tried to improve the behavior is:

Working with native Pro elements instead of the RAW content element.
Working with the Blank stack to reduce ‘bloat’
Disabling all plugins
Enabling and disabling Litespeed caching
Setting my PHP properties high, memory limit etc. (working with PHP version 8.2)
Loading the scripts in Head, Footer, Init

Unfortunately all of this didn’t help. Hoping for some good news as I would like to build this project using Pro.

Thanks!

#2

Been too long my friend.

The HTML output will mostly be for other plugins to read. The element rendering to page will primarily stay the same. As a result I’m not sure out of box you’ll be okay in your instance.

There a couple of warnings in your console. This should have an id as introLogo. Does it have that ID in Cornerstone, is it missing in the Raw Content element, or did the Raw content element strip it?

image

There’s a couple more as well. I would probably recopy paste the HTML portion of that codepen and see if that helps.

image
image977×127 25.8 KB

When using Cornerstone for something like this. You are going to want to utilize IDs to associate with GSAP. I haven’t played around with GSAP much, but it should be possible to do everything with Cornerstone. Site looks very good minus a few little issues. Let me know if this helps and have a great day.

image

#3

Hey Charlie thanks for getting back at this :slight_smile: . It looks like I added the wrong link, indeed the ID ‘introLogo’ was missing on the link I send you earlier, here is a link without any missing selectors: https://camping-lestrexons.com/devlesstage/animated-web2-2/

Here everything is mostly working now. There is still just one difference that I can’t seem to figure out, when using the Duckduckgo browser for mobile (I know this is not a very widely used browser but still I would like to have as much as possible things to look good on any browser) the animation is flickering especially after the initial play. This is not happening in my Codepen example, I just have really no clue why this is happening.

I already tried to optimize for mobile and also switching off resource heavy tweens for mobile but I’m not able to fully get the flickering away (again in my Codepen this is not happening).

Do you have any idea what can cause this?

And lastly I have noticed that when working in the Cornerstone code editors after some time, when clicking on a line, often the cursor jumps to another part, this can be quite annoying. I firstly thought that this was related to the Firefox browser so I switched yesterday to Brave, but I start to notice now that also here I’m getting the same thing that my cursor jumps.

As always, thanks for looking into things!

Wish you a great day also!

1 Like
#4

With the duckduckgo browser I don’t think I was seeing the same flickering you were referring too. I would try to turn off transitions for your overlay element as it seemed to blink to the color black. Or set the overlay as black as the default color. I think that might be related to your issue. I also saw your post in the facebook group, are you already good here?

What browser are you using for the code editor cursor jumps?

#5

Hey Charlie, as usual it is mostly user mistakes, I figured out a way to get rid of the flickering, basically I was scaling the entire SVG which turned out to be very heavy, animating the viewBox attribute is the way to go in this case. The other flickering you most likely saw was because of other issues I’m trying to figure out.

For my modals I’m indeed all good.

Now for the code editor it is much heavier noticeable in the Firefox browser but also happens in the Brave browser.

Some other things I have noticed is that (all happening when no hard refresh is done for a long time);

That sometimes when adding/correcting code that instead of being able to add a character in between a word, that instead of adding this character, it ‘eats’ up the next character.

Although this seems all like minor issues it sucks when you need to refresh the browser since then you lose your history state which can be problematic when debugging.

Since I’m at it :slight_smile:
Another thing that I notice regularly is when you selected something in the code editor, but selected not the exact part and you want to correct it by clicking the correct part and select it by dragging, this doesn’t work, instead you are getting a what seems to be a paste option (but that also isn’t pasting)

And then a feature request, is it possible to add an autocomplete option?

Thanks Charlie.

Cheers!