-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
executable file
·89 lines (86 loc) · 6.18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Context-Aware Animation for Fixed Elements on Scroll | Codrops</title>
<meta name="description" content="Exploring how fixed elements can hide and reveal based on scroll interactions with playful, context-aware animations." />
<meta name="keywords" content="context-aware animation, gsap animation, fixed element, scroll animation" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/kwx7abl.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
</head>
<body>
<main>
<div class="logo" data-fixed>
<span class="logo__pre">xew</span><span>some</span>
</div>
<div class="content content--intro space">
<div class="content__inner">
<p>Ah, the <em>Weltseele</em>. The world soul. That ineffable presence rippling beneath the surface of reality, beckoning us to remember what we’ve always known but somehow forgot: that we’re not separate from the cosmic dance, but participants in it—dancers and dance, observer and observed, <em>simultaneously</em>. </p>
<div class="frame">
<div class="frame__inner">
<h1 class="frame__title">Context-Aware Animation</h1>
<a class="frame__back" href="https://tympanus.net/codrops/?p=81174">Article</a>
<a class="frame__archive" href="https://tympanus.net/codrops/demos/">All demos</a>
<a class="frame__github" href="https://github.com/codrops/ContextAwareLogoAnimationScroll">GitHub</a>
<nav class="frame__tags">
<a href="https://tympanus.net/codrops/demos/?tag=scroll">#scroll</a>
<a href="https://tympanus.net/codrops/demos/?tag=typography">#typography</a>
</nav>
</div>
</div>
</div>
</div>
<div class="content">
<div class="content__inner">
<p>You see, this concept isn’t some metaphysical <em>mumbo-jumbo</em>; it’s a whisper from the deepest recesses of the psychedelic mindscape, a reminder that our destinies are not isolated threads but luminous strands in a galactic spider web of being. The real trick is to step beyond language. Language, for all its beauty and intricacy, is a double-edged sword. It carves out distinctions, draws lines in the sand. But the <em>Weltseele</em> cannot be contained by these categories.</p>
</div>
</div>
<div class="content content--img" style="background-image: url(img/1.jpg)"></div>
<div class="content space">
<div class="content__inner">
<p>It’s the vast, shimmering other that lurks just beyond the reach of syntax and semantics. It’s what spills through the cracks when we let go of the need to explain and surrender to direct experience. Imagine <em>shedding</em> your cultural conditioning like a snake shedding its skin, only to find that beneath it all, we are the same pulsating life force. As Alan Watts might put it, we’re not skin-encapsulated egos, but shimmering nodes in an endless field of consciousness.</p>
</div>
</div>
<div class="content space">
<div class="content__inner">
<h2>Breaking through the thin membrane of ordinary consciousness</h2>
</div>
</div>
<div class="content space">
<div class="content__inner">
<p>And when we engage in <em>psychedelics</em>, we aren’t just altering our perception. We’re tuning in to the frequencies of the Weltseele. We’re breaking through the thin membrane of ordinary consciousness and plunging into the depths of cosmic interconnectedness. The <em>DMT</em> realm, for example, is not just a playground for elves and self-dribbling basketballs—it’s the interface where mind meets world, where the boundaries dissolve, and the self shatters into the infinite possibilities of being.</p>
</div>
</div>
<div class="content space">
<div class="content__inner">
<p>The <em>Weltseele</em> isn’t just some airy-fairy notion for philosophers to debate over. It’s what’s humming at the core of your being when you sit in silence. It’s the light in your lover’s eyes, the rustling of the trees, the resonance of a Tibetan singing bowl. It’s both the source and the destination, the alpha and the omega, beckoning us to wake up, step outside the consensual hallucination we call reality, and remember that we’re <em>already</em> home.</p>
</div>
</div>
<div class="content space">
<div class="content__inner">
<p>But let’s not get too serious about it, because the <em>Weltseele</em> has a sense of humor. Oh yes, it’s the cosmic trickster, hiding in plain sight. It’s that moment when you’re tripping and suddenly, all the questions you’ve been agonizing over for years dissolve into uncontrollable laughter. Because here’s the punchline: the universe loves <em>paradox</em>. It thrives on contradiction. It wears masks upon masks, just to see if you’ll notice. And when you do—when you catch that fleeting glimpse of the infinite staring back at you through a stranger’s eyes or hear it whispering in the spaces between your thoughts—everything becomes a divine joke. You become the joke, but not in a mocking way. More like a cosmic wink that says, <em>“You’re finally in on it!”</em></p>
</div>
</div>
<div class="content content--outro">
<p>Made by <a target="_blank" href="https://x.com/codrops">Codrops</a></p>
<p><a target="_blank" href="https://tympanus.net/codrops/demos/">More demos</a></p>
</div>
</main>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
<!-- GSAP library -->
<script src="js/gsap.min.js"></script>
<!-- GSAP ScrollTrigger plugin -->
<script src="js/ScrollTrigger.min.js"></script>
<!-- Add (Lenis) smooth scroll -->
<script src="js/lenis.min.js"></script>
<script src="js/smoothscroll.js"></script>
<!-- SplitType for text manipulation: https://github.com/lukePeavey/SplitType -->
<script src="js/split-type.min.js"></script>
<!-- Scripts for the effect -->
<script type="module" src="js/index.js"></script>
</body>
</html>