Webstudio

Log inLog into community

Join the Webstudio community

Updated 8 months ago

Parallex & css/js linked Help- website with webstudio.

Parallex & css/js linked Help- website with webstudio.

At a glance

The post is about attaching .js and .css files to create animations. Community members discuss using GSAP, a CodePen example, and issues with implementing animations on a website built with Webstudio. They share links to their Webstudio projects and CodePen examples, and provide suggestions on how to properly structure the CSS and JavaScript. The main issues seem to be getting the animations to work correctly, especially on mobile devices. The answer appears to be that the community members need to properly load the necessary JavaScript libraries, such as GSAP and Swiper.js, in order for the animations to function as expected.

Useful resources

·

Attaching .js file & css how does it work. anyone did any of that animation.

O

c

58 comments

gsap

I think we have it in the marketplace exxample

if I am not mistaken

https://codepen.io/oscicen/pen/zyJeJw

check this. i tried to use .js and .css to use it. but not able to get it right.

ah I dont think we have this in templates ,but share your builder link

what is my builder link. i didnt get it right. or you want to fix on my site?

https://apps.webstudio.is/builder/9c973650-96e8-46b8-8f3d-ab6d75af6c9a?authToken=751140c7-0c46-4455-a49f-a84e3991058d&mode=edit

click share then create a sharable link if you want any help

and lead with that fr the future, don't wait for us to try to guess what your problem is

the link above is not useful

https://apps.webstudio.is/builder/9c973650-96e8-46b8-8f3d-ab6d75af6c9a?authToken=751140c7-0c46-4455-a49f-a84e3991058d&mode=edit

uhhh, lots of stuff there, where do I look?

ideally just the neeecessary reproduction witha. few elements

sorry, i was only looking at "AboutDake" am testing parallex feature. As given in above image.

So it is not home page. only AboutDake page where i am testing that.

Above link codepen parallax am trying it out. .js and .css with that text.

this page not main home, but there is a second page which is created. that one is done for parallax feature.

it has .js, .css and div

@Oleg Isonen did you check it. or should i make this the main home page for checking

why are you setting background position on the h1 when the background is on it's parent element?

https://share.descript.com/view/y74ngZZNP5B

for the test I changed elem.parentElement, but you should query the right element in the first place

for the next time, always provide clear steps to get to your repro, it took several back and forth

thankyou. appreciate you helping in fixing. so in principle it is fine. but adding parentElement. ok.

Add you id on the right elementvinstead

https://codepen.io/Podgro/pen/oNOKYqr

on this one how should i go about it.

i add box and then add html embed to add the js script- module

and add the code in it?

css? by each element. or tokens?

This one i didnt create a page. i want to know how i go about it in thinkng.

this structuring would help as there are more codepen codes which can be used on this topic.

it depends on the logic, generally css first, then html then script

how do we do it. i mean can you guide through a page for this. .css script can we do like a script?

Can you do a page and share please.

https://apps.webstudio.is/builder/9c973650-96e8-46b8-8f3d-ab6d75af6c9a?authToken=751140c7-0c46-4455-a49f-a84e3991058d&mode=edit

check this. i added css and javascript as 2 seperate html embed and then added container with the div names.

is it wrong?

css is defined inside <style> tag, not script

Thankyou so much.

structure of this was perfect.

It worked, Sometimes we as new dont know, thanks for pointing it out. Now it opens lot more options on how i can get it to work.

In this example, i got svgs and layers with css and javascript. so a good complex one to make it work on this.

one thing i have noticed these javascript based animations are not working on mobile browser.

on chrome on mobile phone.

https://dakegroup2024.wstd.io/

this css works, but javascript animation works on design time but when published it is not working. is there something i need to check or do?

Client only checked? For js

yes. small mistakes ok. got it. working on desktop but not on mobile.

https://apps.webstudio.is/builder/9c973650-96e8-46b8-8f3d-ab6d75af6c9a?authToken=751140c7-0c46-4455-a49f-a84e3991058d&mode=edit

Another css/Js problem.
have done all, not sure what the mistake is, have setup js and css like previous.

trying to replicate this.
https://codepen.io/ecemgo/pen/ZEPYNXJ

Parallex & css/js linked Help- website with webstudio.

Attachment

open console when you have a problem first thing

you have not loaded swiper.js script

where do i do that?

js file i added is swiper only

you can do that in the same html embed

thes script with the src attribute that points to the library is missing entirely

its documented on gsap how to use

its also presetn in our gsap template

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

like this you mean?

i already got js with swiper function

this script is that swiper function

this is not gsap, this is a plugin

https://gsap.com/docs/v3/Installation?tab=cdn&module=esm&method=private+registry&tier=free&club=false&require=false&trial=true

mainly using it with webstudio

its the same setup

ok fine.

Add a reply

Sign up and join the conversation on Discord

","dateCreated":"2024-07-05T10:15:23.726Z","dateModified":"2024-07-05T10:15:23.726Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/ab9fa379-de53-4f5b-8cc0-d8d24a69bf26","name":"chandra","identifier":"ab9fa379-de53-4f5b-8cc0-d8d24a69bf26","image":"https://cdn.discordapp.com/embed/avatars/0.png"},"commentCount":0,"comment":[],"position":50,"upvoteCount":0},{"@type":"Comment","text":"like this you mean?","dateCreated":"2024-07-05T10:15:27.360Z","dateModified":"2024-07-05T10:15:27.360Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/ab9fa379-de53-4f5b-8cc0-d8d24a69bf26","name":"chandra","identifier":"ab9fa379-de53-4f5b-8cc0-d8d24a69bf26","image":"https://cdn.discordapp.com/embed/avatars/0.png"},"commentCount":0,"comment":[],"position":51,"upvoteCount":0},{"@type":"Comment","text":"i already got js with swiper function","dateCreated":"2024-07-05T10:17:11.249Z","dateModified":"2024-07-05T10:17:11.249Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/ab9fa379-de53-4f5b-8cc0-d8d24a69bf26","name":"chandra","identifier":"ab9fa379-de53-4f5b-8cc0-d8d24a69bf26","image":"https://cdn.discordapp.com/embed/avatars/0.png"},"commentCount":0,"comment":[],"position":52,"upvoteCount":0},{"@type":"Comment","text":"this script is that swiper function","dateCreated":"2024-07-05T10:18:13.577Z","dateModified":"2024-07-05T10:18:13.577Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/ab9fa379-de53-4f5b-8cc0-d8d24a69bf26","name":"chandra","identifier":"ab9fa379-de53-4f5b-8cc0-d8d24a69bf26","image":"https://cdn.discordapp.com/embed/avatars/0.png"},"commentCount":0,"comment":[],"position":53,"upvoteCount":0},{"@type":"Comment","text":"this is not gsap, this is a plugin","dateCreated":"2024-07-05T10:28:51.860Z","dateModified":"2024-07-05T10:28:51.860Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":54,"upvoteCount":0},{"@type":"Comment","text":"https://gsap.com/docs/v3/Installation?tab=cdn&module=esm&method=private+registry&tier=free&club=false&require=false&trial=true","dateCreated":"2024-07-05T10:29:19.569Z","dateModified":"2024-07-05T10:29:19.569Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":55,"upvoteCount":0},{"@type":"Comment","text":"mainly using it with webstudio","dateCreated":"2024-07-05T14:19:18.805Z","dateModified":"2024-07-05T14:19:18.805Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/ab9fa379-de53-4f5b-8cc0-d8d24a69bf26","name":"chandra","identifier":"ab9fa379-de53-4f5b-8cc0-d8d24a69bf26","image":"https://cdn.discordapp.com/embed/avatars/0.png"},"commentCount":0,"comment":[],"position":56,"upvoteCount":0},{"@type":"Comment","text":"its the same setup","dateCreated":"2024-07-05T14:20:18.100Z","dateModified":"2024-07-05T14:20:18.100Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":57,"upvoteCount":0},{"@type":"Comment","text":"ok fine.","dateCreated":"2024-07-05T14:22:24.822Z","dateModified":"2024-07-05T14:22:24.822Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/ab9fa379-de53-4f5b-8cc0-d8d24a69bf26","name":"chandra","identifier":"ab9fa379-de53-4f5b-8cc0-d8d24a69bf26","image":"https://cdn.discordapp.com/embed/avatars/0.png"},"commentCount":0,"comment":[],"position":58,"upvoteCount":0}],"author":{"@type":"Person","url":"https://help.webstudio.is/members/ab9fa379-de53-4f5b-8cc0-d8d24a69bf26","name":"chandra","identifier":"ab9fa379-de53-4f5b-8cc0-d8d24a69bf26","image":"https://cdn.discordapp.com/embed/avatars/0.png"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]