Eylon
Eylon's Achievements
-
-
-
Rare
-
Rare
-
Rare
Recent Badges
0
Reputation
-
thanks!
-
hello, I do not know why but scrolltriger does not work: I signed up for the guide on the site, I work in a typewriter vs and that's the code I wrote down: But the animation does not work thanks for ths help html & js: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="masthead" role="img" aria-label="Image Description"> <h1> Every Website </h1> <div class="button"> Scroll Down </div> </section> <div class="contentWrapper"> <div class="mainContent"> <h2>Introduction</h2> <p>Morbi accumsan at enim ac rhoncus. Maecenas ut porttitor est. Aliquam nec ultrices nibh, et hendrerit nunc. Sed quis metus pretium, varius risus sit amet, ultrices enim. Sed vehicula diam purus, id euismod nunc porta sit amet. Etiam vitae eleifend nisi.</p> <p>Phasellus aliquam sapien arcu, vel elementum lectus volutpat eu. Morbi ac nibh ut turpis lobortis laoreet. Phasellus hendrerit finibus lorem, et condimentum eros vehicula convallis. Cras lobortis risus quis nibh euismod, vel mollis odio suscipit. Vivamus vel auctor dolor, id vestibulum erat. </p> <p>Duis in lectus nec urna semper sollicitudin. Pellentesque sed magna vitae urna iaculis ullamcorper eu non dui. Vestibulum vel enim sed lacus semper ultricies. Fusce eu viverra nibh. Integer vitae ornare odiocurae;</p> </div> <div class="animation"> <img class="herman" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/herman.svg" /> </div> <div class="mainContent"> <h2>Conclusion</h2> <p>Morbi accumsan at enim ac rhoncus. Maecenas ut porttitor est. Aliquam nec ultrices nibh, et hendrerit nunc. Sed quis metus pretium, varius risus sit amet, ultrices enim. Sed vehicula diam purus, id euismod nunc porta sit amet. Etiam vitae eleifend nisi.</p> <p>Phasellus aliquam sapien arcu, vel elementum lectus volutpat eu. Morbi ac nibh ut turpis lobortis laoreet. Phasellus hendrerit finibus lorem, et condimentum eros vehicula convallis. Cras lobortis risus quis nibh euismod, vel mollis odio suscipit. Vivamus vel auctor dolor, id vestibulum erat. </p> <p>Duis in lectus nec urna semper sollicitudin. Pellentesque sed magna vitae urna iaculis ullamcorper eu non dui. Vestibulum vel enim sed lacus semper ultricies. Fusce eu viverra nibh. Integer vitae ornare odiocurae;</p> </div> <div class="mainContent footer"> <h2>Footer</h2> <p>Morbi accumsan at enim ac rhoncus. Maecenas ut porttitor est. Aliquam nec ultrices nibh, et hendrerit nunc. Sed quis metus pretium, varius risus sit amet, ultrices enim. Sed vehicula diam purus, id euismod nunc porta sit amet. Etiam vitae eleifend nisi.</p> <p>Phasellus aliquam sapien arcu, vel elementum lectus volutpat eu. Morbi ac nibh ut turpis lobortis laoreet. Phasellus hendrerit finibus lorem, et condimentum eros vehicula convallis. Cras lobortis risus quis nibh euismod, vel mollis odio suscipit. Vivamus vel auctor dolor, id vestibulum erat. </p> <p>Duis in lectus nec urna semper sollicitudin. Pellentesque sed magna vitae urna iaculis ullamcorper eu non dui. Vestibulum vel enim sed lacus semper ultricies. Fusce eu viverra nibh. Integer vitae ornare odiocurae;</p> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script> <script src="/main.js"></script> </body> </html> js: gsap.registerPlugin(ScrollTrigger) gsap.from(".herman", { duration:3, x:"-50vw", rotation:-360, ease:"linear", scrollTrigger: { trigger:".herman", markers:true, start:"top 75%", end:"bottom 25%" } }) indx.html main.js style.css
-
Thanks for the help :)! I do not understand: if I write a point ( . ) before the tag that is "class" and not an "id" in another file it does animate but here no. If I try to register gsap.to (".p-frontend", {x: 400}) To move all the pictures it does not animate If I try to register the name of the image: .p-frontend-img-html, it still does not animate I still can not animate the following code, I will share what I write, thank you if you recognize what is wrong with the code: I will share the code if needed also the picturesindex.htmlindex.html <div class="p-frontend" dir="rtl"> <ul> <li> <img class="p-frontend-img-html" src="/images/fullstack/html.png" alt=""></li> <li><img class="p-frontend-img-css" src="/img/fullstack/css.png" alt=""></li> <li> <img class="p-frontend-img-js" src="/img/fullstack/js.png" alt=""></li> <li> <img class="p-frontend-img-bootstrap" src="/img/fullstack/bootstrap.png" alt=""></li> <li> <img class="p-frontend-img-photoshop" src="/img/fullstack/photoshop.png" alt=""> <img class="p-frontend-img-figma" src="" alt=""></li> <li> <img class="p-frontend-img-gsap" src="/img/fullstack/gsap.svg" alt=""> </li> <li> <img class="p-frontend-img-react" src="/img/fullstack/react.png" alt=""></li> </ul> </div> <img id="time" src="images/time.png"> </div> <!-- GSAP 3--> <script src='js/gsap/gsap.min.js'></script> <!-- my custom animation script that I wrote --> <script src="js/animation.js"></script> in js file: gsap.to("p-frontend", {x:400})
-
Hello I took the study course on the site but the examples are with codepan, when I try to do the code in the code editor vs code I fail. I am adding a cdn link to index.html and the link that is meant for the effect, but gsap still does not work. Is it possible to explain how I use code editor vs with gsap? thanks.